2013-06-26 2 views
1

jQuery를 사용하여 창을 새로 고칠 때마다 임의로 웹 페이지에 배경 이미지를 지정합니다. 각 배경에 해당 텍스트 색상을 지정하고 싶습니다.Jquery : 임의의 배경 이미지에 텍스트 색상을 연결

나는이 코드를 시도하지만 운이없는거야 : 각 요소는 '배경/텍스트 색'의 배열 실제로 있도록

$(document).ready(function() { 
    var images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg']; 

    $('body').css({ 
     'background-image': 'url(img/' + images[Math.floor(Math.random() * images.length)] + ')' 
    }); 

    if ($('body').css('background-image') === 'img/5.jpg') { 
     $('#intro').css('color', 'red!important'); 
    }; 
}); 
+0

창을 새로 고칠 때마다 모든 것이 손실되므로 localStorage 또는 쿠키를 사용해야합니다. – adeneo

+0

임의의 숫자를 변수에 넣은 다음 이전에 할당 한 배경 이미지를 검색하는 대신 if에서 해당 변수를 사용하는 것이 어떻습니까? –

답변

2

.css('background-image')url()으로 감싸는 이미지 URL을 반환합니다. 당신이 할 수있는 지금

var themes = [{ 
    image: '1.jpg', 
    color: 'red' 
}, { 
    image: '2.jpg', 
    color: 'orange' 
}]; 

: 내가 대신 객체의 배열을 사용

var theme = themes[Math.floor(Math.random() * themes.length)]; 

$('body').css({ 
    'background-image': 'url("img/' + theme.image + '")', 
    'color': theme.color 
}); 
0

이 왜 images 배열을 업데이트하지 -이 등이 :

var images = [['1.jpg', '#000'], ['2.jpg', '#111'], ['3.jpg', '#222'], ['4.jpg', '#333'], ['5.jpg', '#444'], ['6.jpg', '#555']]; 
var random = Math.floor(Math.random() * images.length)] 
$(body).css({ 
    'background-image': 'url(img/' + images[random][0] + ')', 
    'color':   images[random][1] 
}); 
0

이 반환되는 것을 볼 수 console.log($('body').css('background-image'))을 넣어보십시오. 나는 그 URL (IMG/5.jpg) 같은 것을 반환 생각 대신 IMG/5.jpg의

그 변수와 비교합니까 다음 변수에 임의의 일을 설정하고있는 경우도 아마 쉽게 대신 CSS 속성 여기

0

내가 그것을 할 것입니다 방법은 다음과 같습니다 그러나

var styles = [ 
    { image: '1.jpg', color: 'blue' }, 
    { image: '2.jpg', color: 'green' }, 
    ... 
]; 

var style = styles[Math.floor(Math.random() * styles.length)]; 
$(body).css{ 'background-image': 'url(img/' + style.image + ')', 
      'color': style.color + '!important' }); 

, 코드와 기본적인 문제는 기존 스타일에 비해 당신이 url(...)을 잊고 있다는 것을, 그것은해야한다 :

if ($('body').css('background-image') === 'url(img/5.jpg)') { 
관련 문제