jQuery 滚动列表

来源：互联网发布：淘宝关键词网站编辑：程序博客网时间：2024/05/18 14:43

网上拿来一段，改了一下，使用abosute提高浏览器渲染性能，增加设定可见行数。注意li之间不要上下margin，否则效果不好。

// 滚动插件 // http://www.jb51.net/article/23526.htm// usage: $("#scrollDiv").Scroll({line:4,speed:500,timer:1000, viewLine: 10}); // mod by Ethan Chen(function($){ $.fn.extend({ Scroll:function(opt,callback){ //参数初始化 if(!opt) var opt={}; var $slc = $(this);var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").innerHeight(), //获取行高 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; var viewHeight = opt.viewLine? ( lineH * opt.viewLine ) : ( lineH * 5 );$slc.css({'position':'relative','height':viewHeight,'overflow':'hidden'});_this.css({'position':'absolute','top':0,'left':0});//滚动函数 scrollUp=function(){ _this.animate({ top:upHeight },speed,function(){ for(i=1;i<=line;i++){ _this.find("li:first").appendTo(_this); } _this.css({top:0}); }); } //鼠标事件绑定 _this.hover(function(){ clearInterval(timerID); },function(){ timerID=setInterval("scrollUp()",timer); }).mouseout(); } }) })(jQuery);

修改了一下，使用setTimeout 代替 setInterval

// 滚动插件 // http://www.jb51.net/article/23526.htm// usage: $("#scrollDiv").Scroll({line:4,speed:500,timer:1000, viewLine: 10}); // mod by Ethan Chen(function($){ $.fn.extend({ Scroll:function(opt,callback){ //参数初始化 if(!opt) var opt={}; var $slc = $(this);var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").innerHeight(), //获取行高 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; var viewHeight = opt.viewLine? ( lineH * opt.viewLine ) : ( lineH * 5 );$slc.css({'position':'relative','height':viewHeight,'overflow':'hidden'});_this.css({'position':'absolute','top':0,'left':0});//滚动函数 var t;var scrollUp=function(){ _this.animate({ top:upHeight },speed,function(){ for(i=1;i<=line;i++){ _this.find("li:first").appendTo(_this); } _this.css({top:0}); }); t = setTimeout(scrollUp, timer);} //鼠标事件绑定  _this.hover(function(){ clearTimeout(t); },function(){ scrollUp();}).mouseout();  // mouseout to start the function } }) })(jQuery);