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闪烁的背景图像

回答

相关问题