1

我有 2 个关于 Jquery 和背景图片的问题。我有一个简单的 html 页面：

<!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 秒闪烁（每次））？

我希望有人可以帮助我解决这个问题。

4

1 回答 1

1

LIVE DEMO

问：

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-25T14:46:56.147 回答