Question

我有以下JS片段，可以将BG颜色从红色切换为绿色等等。

function blink() {
            var currentColor = 'red';
            setInterval(function () {
                document.body.style.backgroundColor = currentColor;
                currentColor = currentColor === 'red' ? 'green' : 'red';
            }, 1000);
        };

无论如何都要将颜色更改为图像，以便在两个图像之间切换而不是两种颜色？

我尝试过以下但未成功：

function toggleBG() {
            var currentColor = "Images/tableBGRed.gif";
            setInterval(function () {
                var myDiv = document.getElementById("testDiv");
                myDiv.style.backgroundImage = "url('" + currentColor + "')";
                currentColor = currentColor === "url('Images/tableBGRed.gif')" ? "url('Images/tableBG.gif')" : "url('Images/tableBGRed.gif')";
            }, 1000);
        };

语法有问题吗？

Answer 1

currentColor = currentColor === "url('Images/tableBGRed.gif')" ? "url('Images/tableBG.gif')" : "url('Images/tableBGRed.gif')";

会导致字符串变为"url(url(' Images/cat.gif '))"，这不是myDiv.style.backgroundImage的有效值，

因为您在上一行中有myDiv.style.backgroundImage = "url('" + currentColor + "')";。

更新

您可以使用CSS3使其看起来像动画（褪色）：

#testDiv{
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}

Answer 2

对我而言，您的代码似乎创建了一个背景图像

url('url('Images/xxx.gif')')

尝试

function toggleBG() {
    var currentColor = "url('Images/tableBGRed.gif')";
    setInterval(function () {
        var myDiv = document.getElementById("testDiv");
        myDiv.style.backgroundImage = currentColor;
        currentColor = currentColor === "url('Images/tableBGRed.gif')" ? "url('Images/tableBG.gif')" : "url('Images/tableBGRed.gif')";
    }, 1000);
};

javascript切换背景图片

2 个答案: