jquery閃爍的背景圖像

我有2個關於jquery和背景圖像的問題。我有一個簡單的HTML頁面：jquery閃爍的背景圖像

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Dreamweaver test</title> 
<link rel='stylesheet' type='text/css' href='stylesheet.css'/> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
</head> 
<body> 
<div id="outer"> 
<div id="container"> 
<div id="inner"> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html>

而且我的CSS：

 @charset "utf-8"; 
/* CSS Document */ 
* {margin:0;padding:0} 
/* mac hide \*/ 
html,body{height:100%;width:100%;} 
/* end hide */ 
body { 
background-color: black; 
text-align:center; 
min-height:468px;/* for good browsers*/ 
min-width:552px;/* for good browsers*/ 
} 
#outer{ 
height:100%; 
width:100%; 
display:table; 
vertical-align:middle; 
} 
#container { 
text-align: center; 
position:relative; 
vertical-align:middle; 
display:table-cell; 
height: 468px; 
} 
#inner { 
width: 500px; 
height: 500px; 
text-align: center; 
margin-left:auto; 
margin-right:auto; 
background-image: url(mainpage.jpg); 
}

正如你可以看到我有一個內部的div和我想要的背景圖片如下：

我創建了另一個名爲mainpageflickering.jpg的圖片，這些圖片略有不同。我想讓圖像閃爍（像破燈一樣），我認爲可以用jQuery來做到這一點，但我不知道如何。所以這些是我的兩個問題：

我該如何告訴jQuery使用背景圖片進行更改？如何告訴jQuery閃爍（例如：2秒正常圖像，1秒閃爍，2秒正常圖像，1秒閃爍（每次））？

我希望有人能幫助我解決這個問題。

來源

2013-04-25 Niek Jonkman

LIVE DEMO

JQ：

var $FlickImg = $('#inner img'), c = 0; 

(function loop(){ 
    var time = ~~(Math.random()*600) + 1; 
    $FlickImg.delay(time).fadeTo(30, ++c%2, loop); 
})();

HTML：

<div id="inner"> 
    <img src="image.jpg"> 
</div>

CSS：

#inner{ 
    background: url(backgroundImage.jpg); 
}

來源

2013-04-25 14:46:56

謝謝你的工作，你知道如果它可能使用更多的圖像，所以而不是原來的1圖像可以說3或4？（jQuery初學者） – 2013-04-25 18:16:28

jquery閃爍的背景圖像

回答

相關問題