基于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类库,后初始化插件参数,不设置即为默认值
$(‘#scroll‘).myScroll({ ???speed:40, ?//滚动速度,值越大速度越慢 ???rowHeight:24 //每行的高度})
注:以上为垂直滚动,如需水平滚动请修改相应参数("rowHeight"/"margin-top")
scroll.js
原文地址:http://www.cnblogs.com/yxrs/p/7853849.html