javascript - 切换 body 背景

Question

我希望有人能帮我解决这个问题，我有这个 javascript 代码可以切换我的 body 背景

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？基本上我有两张 body 背景图片，我希望能够点击链接切换 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。