0

我希望有人可以帮助我，我有这个 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，等等...

最后，我怎样才能让两个背景淡入淡出？而不是在两者之间切换？

4

3 回答 3

4

使用 CSS 类！

CSS 规则

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

JavaScript：

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

如果你想淡化，你最终将不得不淡化整个页面。使用可以使用 jQueryfadeIn和fadeOut.

于 2013-01-19T05:48:59.753 回答
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;
}

这是jsFiddle 上的工作代码。

这是jsFiddle 上的 jQuery 版本。

更新：交叉褪色版本

这是jsFiddle 上的交叉淡入淡出的 jQuery 版本。

您不希望整个页面（包含所有元素）淡入/淡出。只有 bg 应该褪色。所以，这个版本有一个 div 用作背景容器。它的z 深度是这样安排的，以便它将自己保持在页面上最底部的元素；并在其两个孩子之间切换以创建交叉淡入淡出效果。

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

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

于 2013-01-19T05:51:17.537 回答
1

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

<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函数本地的列表，始终使用第一个可用的列表。这也需要 run window.onload，最好作为window.addEventListener/ window.attachEventon the buttonor 触发它运行的元素。

或者使用 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 版本：

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/

于 2013-01-19T05:47:28.467 回答