jQuery實現的向下圖文信息滾動效果

2024-05-06 16:19:10

字體：大中小

來源：轉載

供稿：網友

jquery實現的圖文滾動效果,圖文內容經過指定的間隔時間自動向下滾動顯示,效果非常酷。有需要的小伙伴可以參考下。

WEB頁面需要展示網站最新信息，如微博動態、余票信息、路況監控等項目中常見的實時數據滾動效果，我們可以用jQuery來實現前端信息滾動效果。本文我們將結合實例為大家講解如何使用jQuery來實現圖文信息滾動效果。

我們以新浪微博信息滾動為背景，html中包含了多條微博圖文信息，結構如下：

<div id="con">

<ul>

<li> <a href="#" class="face"><img src="http://tp3.sinaimg.cn/1197161814/

50/1290146312/1" /></a>

<h4><a href="#">李開復</a></h4>

<p>【領導力的四個境界】境界一：員工因為你的職位而服從你；境界二：員工因為你的能力而服從你；

境界三：員工因為你的培養而服從你，他們感恩于你對他們的尊重、培養和付出；

境界四：員工因為你的為人、魅力、風范、價值觀而擁戴你。（轉）</p>

</li>

...更多內容...

</ul>

</div>

CSS

我們用CSS來美化頁面布局，以下是數據滾動區的CSS代碼，當然大家可以修改css定制不同的外觀效果。

ul,li{ list-style-type:none;}

#con{ width:760px; height:400px; margin:30px auto 10px auto; position:relative;

border:1px #d3d3d3 solid; background-color:#fff; overflow:hidden;}

#con ul{ position:absolute; margin:10px; top:0; left:0; padding:0;}

#con ul li{ width:100%; border-bottom:1px #ccc dotted; padding:20px 0; overflow:hidden; }

#con ul li a.face{ float:left; width:50px; height:50px; margin-top:2px; padding:2px;}

#con ul li h4{height:22px; line-height:22px; margin-left:60px}

#con ul li p{ margin-left:60px;line-height:22px; }

jQuery

原理：我們定義一個滾動函數scrtime()，當鼠標滑向滾動區域時，停止滾動(即清除scrtime)，當鼠標離開時繼續滾動，滾動scrtime()的過程中，讓最后的li元素定時插入第一個li元素的上方，采用animate方法來改變li的高度和透明效果，實現動畫加載效果，然后定時每隔3秒鐘執行一次滾動。

$(function(){

var scrtime;

$("#con").hover(function(){

clearInterval(scrtime);//停止滾動

},function(){

scrtime = setInterval(function(){

var ul = $("#con ul");

var liHeight = ul.find("li:last").height();//計算最后一個li元素的高度

ul.animate({marginTop : liHeight+40 +"px"},1000,function(){

ul.find("li:last").prependTo(ul)

ul.find("li:first").hide();

ul.css({marginTop:0});

ul.find("li:first").fadeIn(1000);

});

},3000);

}).trigger("mouseleave");

});