今儿分享一个jquery实现多行滚动效果。

我看一些论坛网站上面，公告处用的较多。

代码如下

// 多行滚动(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):1000, //卷动速度，数值越大，速度越慢（毫秒）timer=opt.timer?parseInt(opt.timer,10):5000; //滚动的时间间隔（毫秒）if(line==0) line=1;var upHeight=0-line*lineH;scrollUp=function(){_this.animate({marginTop:upHeight},speed,function(){for(i=1;i

实例演示

代码如下

<div id="scrollDiv"><ul><li>我是jquery多行滚动条一</li><li>我是jquery多行滚动条二</li><li>我是jquery多行滚动条三</li><li>我是jquery多行滚动条四</li><li>我是jquery多行滚动条五</li><li>我是jquery多行滚动条六</li><li>我是jquery多行滚动条七</li><li>我是jquery多行滚动条八</li></ul></div><script type="text/javascript" src="http:/(/ajax/libs/jquery/1.7.1/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):1000, //卷动速度，数值越大，速度越慢（毫秒）timer=opt.timer?parseInt(opt.timer,10):5000; //滚动的时间间隔（毫秒）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:4,speed:1000,timer:2000});});</script>