話不多說，請看代碼：
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>多行滾動jQuery循環(huán)新聞列表代碼</title><style type="text/css">ul,li{margin:0;padding:0}#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}#scrollDiv li{height:25px;padding-left:10px;}</style><script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript">//滾動插件(function($){$.fn.extend({ Scroll:function(opt,callback){ //參數初始化 if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), //獲取行高 line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滾動的行數，默認為一屏，即父容器高度 speed=opt.speed?parseInt(opt.speed,10):500, //卷動速度，數值越大，速度越慢（毫秒） timer=opt.timer?parseInt(opt.timer,10):3000; //滾動的時間間隔（毫秒） if(line==0) line=1; var upHeight=0-line*lineH; //滾動函數 scrollUp=function(){ _this.animate({ marginTop:upHeight },speed,function(){ for(i=1;i<=line;i++){ _this.find("li:first").appendTo(_this); } _this.css({marginTop:0}); }); } //鼠標事件綁定 _this.hover(function(){ clearInterval(timerID); },function(){ timerID=setInterval("scrollUp()",timer); }).mouseout(); } })})(jQuery);$(document).ready(function(){ $("#scrollDiv").Scroll({line:1,speed:500,timer:1000});//可修改line值，speed值，timer值});</script></head><body><p>多行滾動演示：</p><div id="scrollDiv"> <ul> <li>這是公告標題的第一行</li> <li>這是公告標題的第二行</li> <li>這是公告標題的第三行</li> <li>這是公告標題的第四行</li> <li>這是公告標題的第五行</li> <li>這是公告標題的第六行</li> <li>這是公告標題的第七行</li> <li>這是公告標題的第八行</li> </ul></div></body></html>***請再次刷新查看效果，或保存到本地瀏覽***以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
