2、實現(xiàn)原理首先要設(shè)定div內(nèi)只能顯示4個圖片那么多出來的圖片會自動隱藏然后在給圖片添加一個動畫的事件讓他們可以滾動的播放出來上下滾動效果播放就是li標(biāo)簽里面的內(nèi)容圖片和文字把每一個li看成一個整體在滾動播放的時候進(jìn)入div內(nèi)的顯示出來在最后離開div的時候隱藏在給整個動畫效果設(shè)定一個時間就可以完整的運行。

3、運行環(huán)境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游覽器下都可實現(xiàn)

4、所有圖片的壓縮包新建一個文件后將包解壓放進(jìn)文件夾圖片的壓縮包在頁面的最下方可以看到并下載下載后無需修改文件夾名因為本身就已經(jīng)寫好了和html5內(nèi)的路徑相吻合

5、將創(chuàng)建html文件保存的時候?qū)⒕幋a類型換成(UTF-8有簽名)這樣可以讓部分中文正常的顯示出來，將保存類型(T)換成(所有文件(*.*))，將html5和解壓后的圖片文件夾放在同一個文件夾內(nèi)效果

效果圖：

代碼：

<!DOCTYPE HTML">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="screen">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}
.demo{width:500px;margin:30px auto 0 auto;}
.demo h2{font-size:16px;color:#333;height:52px;line-height:24px;}
/* sidebar */
#sidebar{color:#AFB0B1;background:#0D171A;float:left;margin:0 0 24px;padding:15px 10px 10px;width:300px;}
#sidebar li{height:90px;overflow:hidden;}
#sidebar li h5{color:#A5A9AB;font-size:1em;margin-bottom:0.5em;}
#sidebar li h5 a{color:#fff;text-decoration:none;}
#sidebar li img{float:left;border:solid 3px #fff;margin-right:8px;display:inline;}
#sidebar li .info{color:#B1B1B1;font-size:1em;}
#sidebar .spyWrapper{height:100%;overflow:hidden;position:relative;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
(function($){
?$.fn.simpleSpy = function (limit, interval){
? limit = limit || 4;
? /*讓div始終顯示4個單位的高度*/
? interval = interval || 4000;
? /*控制每個動畫效果的時間4000毫秒就是4秒 從最下面的圖片消失到第5張圖片的從上面顯示出來一個動畫2秒一共4秒的時間*/
? return this.each(function(){
? ?var $list = $(this),
? ?/*獲得所有列表項目的緩存*/
? ?items = [],
? ?/*未初始化*/
? ?currentItem = limit,
? ?total = 0,
? ?/*初始化以后*/
? ?height = $list.find('> li:first').height();
? ?/*列表限制li元素*/
? ?$list.find('> li').each(function(){
? ?/*獲得緩存*/
? ? items.push('<li>' + $(this).html() + '</li>');
? ? /*獲得所有列表的li里面的緩存*/
? ?});
?
? ?total = items.length;
? ?/*始終顯示在緩存里的li*/
?
? ?$list.wrap('<div class="spyWrapper" />').parent().css({height : height * limit});
? ?/*控制div在圖片消失的時候依然保持同樣的高度不會因為div的消失而變化*/
?
? ?$list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
? ?/*通過調(diào)用遍歷方法獲得所有l(wèi)i元素在實現(xiàn)移除的方法*/
? ?
? ?function spy(){
? ?/*開始第二個圖片從最上方插入的效果*/
? ? var $insert = $(items[currentItem]).css({height : 0,opacity : 0,display : 'none'}).prependTo($list);
? ? /*插入一個新的div，透明度和高度為零*/
?
? ? $list.find('> li:last').animate({ opacity : 0}, 1000, function(){
? ? /*通過遍歷插入一個動畫出現(xiàn)的效果 時間為1秒*/
? ? ?$insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
? ? ?/* 增加新的第一個div的高度*/
? ? ?$(this).remove();?
? ? ?/*這個移除的效果是什么呢 就是在當(dāng)我們第一次加載完頁面的時候都會有幾個只有圖片沒有屬性值的li 清除就是在第一個動畫結(jié)束后把沒有屬性的li給刪除掉 沒有屬性的就是 沒有高的 沒有動畫效果的li*/
? ? });
?
? ? currentItem++;
? ? /*永遠(yuǎn)在第一個li位置顯示出現(xiàn)的是下一個li圖片*/
? ? if(currentItem >= total){
? ? /*如果4張圖片大于或等于所有的大于或等于整個圖片的的話*/
? ? ?currentItem = 0;
? ? ?/*那么就從0開始*/
? ? }
? ? setTimeout(spy, interval)
? ? /*在ul和4秒內(nèi)完成*/
? ?}
?
? ?spy();
? ?/*效果的整個開關(guān)*/
? });
?};?
})(jQuery);
</script>
?
<script type="text/javascript">
$(document).ready(function(){
?$('ul.spy').simpleSpy();
?/*ul.spy調(diào)用simpleSpy()模版方法*/
});
</script>
?
</head>
<body>
?
<div class="demo">
?
?<h2>jquery仿新浪微博圖片文字列表間隙滾動淡進(jìn)淡出滾動</h2>
?
?<div id="sidebar">
? <ul class="spy">
? ?<li>
? ? <a href="#" title="View round"><img width="70" height="70" src="images/1.png" title="" /></a>
? ? <h5><a href="htt#" title="View round">round</a></h5>
? ? <p class="info">Nov 29th 2008 by neue</p>
? ?</li>
? ?<li>
? ? <a href="#" title="View reflet"><img width="70" height="70" src="images/2.png" title="" /></a>
? ? <h5><a href="#" title="View reflet">reflet</a></h5>
? ? <p class="info">Nov 29th 2008 by neue</p>
? ?</li>
? ?<li>
? ? <a href="#" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="images/3.png" title="" /></a>
? ? <h5><a href="#" title="View Kate Moross Little Big Planet">Kate Moross Little Big Planet</a></h5>
? ? <p class="info">Nov 29th 2008 by neue</p>
? ?</li>
? ?<li>
? ? <a href="#" title="View Untitled"><img width="70" height="70" src="images/4.png" title="" /></a>
? ? <h5><a href="#" title="View Untitled">Untitled</a></h5>
? ? <p class="info">Nov 29th 2008 by mike1052</p>
? ?</li>
? ?<li>
? ? <a href="#" title="View My Tutorial's Library"><img width="70" height="70" src="images/5.png" title="" /></a>
? ? <h5><a href="#" title="View My Tutorial's Library">My Tutorial's Library</a></h5>
? ? <p class="info">Nov 29th 2008 by FrancescoOnAir</p>
? ?</li>
? ?<li>
? ? <a href="#" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/6.png" title="" /></a>
? ? <h5><a href="#" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5>
? ? <p class="info">Nov 29th 2008 by John Doe</p>
? ?</li>
? ?<li>
? ? <a href="#" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/7.png" title="" /></a>
? ? <h5><a href="#" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5>
? ? <p class="info">Nov 29th 2008 by John Doe</p>
? ?</li>
? ?<li>
? ? <a href="#" title="View Sandy — your free personal email assistant"><img width="70" height="70" src="images/8.png" title="" /></a>
? ? <h5><a href="#" title="View Sandy — your free personal email assistant">Sandy — your free</a></h5>
? ? <p class="info">Nov 29th 2008 by John Doe</p>
? ?</li>
? ?<li>
? ? <a href="#" title="View Values of n Blog"><img width="70" height="70" src="images/9.png" title="" /></a>
? ? <h5><a href="#" title="View Values of n Blog">Values of n Blog</a></h5>
? ? <p class="info">Nov 29th 2008 by John Doe</p>
? ?</li>
? </ul>
?</div>
??
</div>
?
</body>
</html>

以上就是jQuery實現(xiàn)圖片文字淡入淡出效果的代碼，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: