1

Jquery と背景画像に関して 2 つの質問があります。私は単純な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でそれを行うことは可能だと思いますが、方法がわかりません。だから、これらは私の2つの質問です：

背景画像を使用して変更するようjQueryに指示するにはどうすればよいですか? jQuery にちらつきを指示するにはどうすればよいですか (例: 2 秒間の通常の画像、1 秒間のちらつき、2 秒間の通常の画像、1 秒間のちらつき (毎回))。

誰かがこれで私を助けてくれることを願っています。

4

1 に答える 1

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);
}
于 2013-04-25T14:46:56.147 に答える