Question

我有两个关于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秒闪烁（每次））？

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

Answer 1

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

Jquery闪烁的背景图像

1 个答案: