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中工作正常，但在chrome中，链接工作两次然后停止工作，它基本上切换到bg_2.jpg然后一次点击再次切换回bg.jpg然后它再也不会工作： /

另外，有没有更简单的方法来实现这一目标？也许只有css？基本上我有两个身体背景图片，我希望能够点击链接切换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

这是您的解决方案：（这也支持其他图像）。

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 。

更新： CROSS-FADING版本

以下是 cross-fading jQuery version on jsFiddle 。

您不希望整个页面（包含所有元素）淡入/淡出。只有bg会褪色。因此，此版本有一个div用作后台容器。它的 z-depth 的排列方式使它自身成为页面最底层的元素;并在其两个孩子之间切换以创建交叉淡化效果。

<强> 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.
});

这可以进一步改进，但它应该给你一个想法。

Answer 3

有一种更清洁的方法可以做到这一点。作为演示，请参阅：

<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上运行window.addEventListener，最好是window.attachEvent / button或触发它运行的元素。

或者使用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/

切换身体背景

3 个答案: