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");
});
以上程式碼實現了一個內容持續向下滾動的效果，每隔3秒內容將從上部淡入，完成內容滾動效果。
補充
關於圖片自動圓角處理，我們可以使用jquery.corner.js這個插件，使用靈活，兼容各瀏覽器，這個插件下載包裡已經為您準備好了。當然你也可以使用css3來控制圓角。
以上所述就是本文的全部內容了，希望大家能夠喜歡。
