JavaScript切换背景图像

我有以下一块JS，它将BG颜色从红色切换到绿色等等。JavaScript切换背景图像

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

蹊跷的语法？

来源

2013-09-27 sd_dracula

你有没有设置heig ht和div的宽度，因为没有内容div将被折叠，除非它具有内容或设置高度和宽度，否则将不可见。 –

这也可能有所帮助：http://stackoverflow.com/questions/10867503/change-background-image-in-body你可以尝试的另一件事就是摆脱？：语法并使用实际的if/else。我从来没有信任过这种语法。 –

是的div有内容和BG上方的toggleBG（）函数变为红色，只是保持红色，从来没有真正改变“url（'Images/tableBG.gif'）”似乎 –

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

来源

2013-09-27 12:19:58

对我来说，似乎你的代码创建一个将backgroundImage作为

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

来源

2013-09-27 12:20:49 user2764860

是的，就是这样。谢谢。有没有办法让“动画”更流畅？像淡入淡出？ –

@sd_dracula我给你的建议是使用jQuery或CSS3。 –

有关CSS3转换的信息，请参阅http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/ – user2764860

JavaScript切换背景图像

回答

相关问题