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切換背景圖像

回答

相關問題