撥動機身背景

Question

我希望有人能幫助我，我有一個觸發我的身體背景這段JavaScript代碼

function changeDivImage() { 
    imgPath = document.body.style.backgroundImage; 
    if (imgPath == "url(images/bg.jpg)" || imgPath == "") { 
     document.body.style.backgroundImage = "url(images/bg_2.jpg)"; 
    } else { 
     document.body.style.backgroundImage = "url(images/bg.jpg)"; 
    } 
} 

我這個鏈接激活它：

<a href="#" onclick="changeDivImage()">change</a> 

我的問題是，它工作正常在IE和Firefox，但在鉻，鏈接工作兩次，然後停止工作，它基本上切換到bg_2.jpg然後一旦再次點擊切換回bg.jpg然後它再也不會工作：/

也是，有沒有更簡單的方法來完成這個？只有可能嗎？基本上我有兩個身體背景圖片，我希望能夠點擊鏈接切換1，然後再次點擊切換2，然後回到1，等等......

最後，我該如何使兩個背景淡入淡出？而不是在兩者之間切換？

Answer 1

使用CSS類！

CSS規則

body { background-image: url(images/bg.jpg); } 
body.on { background-image: url(images/bg_2.jpg); } 

的JavaScript：

function changeDivImage() { 
    $("body").toggleClass("on"); 
} 

如果你想淡出，你最終將不得不淡出整個頁面。使用可以使用jQuery的fadeIn和fadeOut。

Answer 2

有一個更乾淨的方法來做到這一點。作爲演示，請參閱：

<button id="toggle" type="button">Toggle Background Color</button> 

var togglebg = (function(){ 
    var bgs = ['black','blue','red','green']; 

    return function(){ 
     document.body.style.backgroundColor = bgs[0]; 
     bgs.push(bgs.shift()); 
    } 
})(); 

document.getElementById('toggle').onclick = togglebg; 

http://jsfiddle.net/userdude/KYDKG/

顯然，你將取代Color與Image，但是這一切確實是通過當地的togglebg功能列表循環，總是使用第一個可用的。這也需要運行window.onload，最好是button上的window.addEventListener/window.attachEvent或將觸發它運行的元素。

或者使用jQuery（我注意到現在標籤）：

jQuery(document).ready(function ($) { 
    var togglebg = (function() { 
     var bgs = ['black', 'blue', 'red', 'green']; 

     return function() { 
      document.body.style.backgroundColor = bgs[0]; 
      bgs.push(bgs.shift()); 
     } 
    })(); 

    $('#toggle').on('click', togglebg); 
}); 

http://jsfiddle.net/userdude/KYDKG/1/

這裏是一個DummyImage version使用真實的圖像：

jQuery(document).ready(function ($) { 
    var togglebg = (function() { 
     var bgs = [ 
       '000/ffffff&text=Black and White', 
       '0000ff/ffffff&text=Blue and White', 
       'ffff00/000&text=Yellow and Black', 
       'ff0000/00ff00&text=Red and Green' 
      ], 
      url = "url('http://dummyimage.com/600x400/{img}')"; 

     return function() { 
      document.body.style.backgroundImage = url.replace('{img}', bgs[0]); 
      bgs.push(bgs.shift()); 
     } 
    })(); 

    $('#toggle').on('click', togglebg); 
}); 

http://jsfiddle.net/userdude/KYDKG/2/

Answer 3

這裏是你的解決方案： （這也支持額外的圖像）。

var m = 0, imgs = ["images/bg.jpg", "images/bg_2.jpg"]; 

function changeDivImage() 
{ 
    document.body.style.backgroundImage = "url(" + imgs[m] + ")"; 
    m = (m + 1) % imgs.length; 
} 

這裏是working code on jsFiddle。

這是jQuery version on jsFiddle。

UPDATE：淡入淡出版

這裏是cross-fading jQuery version on jsFiddle。

您不希望整個頁面（包含所有元素）淡入/淡出。只有BG應該消失。所以，這個版本有一個div用作背景容器。它的縱深被安排，使它將自己保持在頁面上最底部的元素;並在兩個孩子之間切換以創建淡入淡出效果。

HTML：

<div id="bg"> 
    <div id="bg-top"></div> 
    <div id="bg-bottom"></div> 
</div> 
<a id="bg-changer" href="#">change</a> 

CSS：

div#bg, div#bg-top, div#bg-bottom 
{ 
    display: block; 
    position: fixed; 
    width: 100%; 
    /*height: 500px;*/ /* height is set by javascript on every window resize */ 
    overflow: hidden; 
} 
div#bg 
{ 
    z-index: -99; 
} 

使用Javascript（jQuery的）：

var m = 0, 
/* Array of background images. You can add more to it. */ 
imgs = ["images/bg.jpg", "images/bg_2.jpg"]; 

/* Toggles the background images with cross-fade effect. */ 
function changeDivImage() 
{ 
    setBgHeight(); 
    var imgTop = imgs[m]; 
    m = (m + 1) % imgs.length; 
    var imgBottom = imgs[m]; 
    $('div#bg') 
     .children('#bg-top').show() 
     .css('background-image', 'url(' + imgTop + ')') 
     .fadeOut('slow') 
     .end() 
     .children('#bg-bottom').hide() 
     .css('background-image', 'url(' + imgBottom + ')') 
     .fadeIn('slow'); 
} 

/* Sets the background div height to (fit the) window height. */ 
function setBgHeight() 
{ 
    var h = $(window).height(); 
    $('div#bg').height(h).children().height(h); 
} 

/* DOM ready event handler. */ 
$(document).ready(function(event) 
{ 
    $('a#bg-changer').click(function(event) { changeDivImage(); }); 
    changeDivImage(); //fade in the first image when the DOM is ready. 
}); 

/* Window resize event handler. */ 
$(window).resize(function(event) 
{ 
    setBgHeight(); //set the background height everytime. 
}); 

這可能是改進更多，但它應該給你一個想法。