scroll.js
基于jquery的无缝平滑滚动插件
(function($){ $.fn.myScroll = function(options){ //默认配置 var defaults = { speed:40, //滚动速度,值越大速度越慢 rowHeight:24 //每行的高度 }; var opts = $.extend({}, defaults, options),intId = []; function marquee(obj, step){ obj.find("ul").animate({ marginTop: '-=1' },0,function(){ var s = Math.abs(parseInt($(this).css("margin-top"))); if(s >= step){ $(this).find("li").slice(0, 1).appendTo($(this)); $(this).css("margin-top", 0); } }); } this.each(function(i){ var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this); intId[i] = setInterval(function(){ if(_this.find("ul").height()<=_this.height()){ clearInterval(intId[i]); }else{ marquee(_this, sh); } }, speed); _this.hover(function(){ clearInterval(intId[i]); },function(){ intId[i] = setInterval(function(){ if(_this.find("ul").height()<=_this.height()){ clearInterval(intId[i]); }else{ marquee(_this, sh); } }, speed); }); }); } })(jQuery);
使用方法
先引入jquery类库,后初始化插件参数,不设置即为默认值,初始化函数绑定在ul外层div上(需设置宽 / 高并overflow:hidden)
保证ul的宽或高超出外层div才会有效果
$('#scroll').myScroll({ speed:40, //滚动速度,值越大速度越慢 rowHeight:24 //每行的高度 })
注:以上为垂直滚动,如需水平滚动请修改插件相应参数("rowHeight"/"margin-top"/"width()")
所谓境界,像宇宙般虚无缥缈,却又像宇宙般在岁月的长河中积累、沉淀,无声无息地壮大自己。有些事非一朝而能明了,有些理非一夕而能透彻。带着自信坚持下去,书读百遍,其义自见,境界到了,万物皆虚,万事皆允!