JQ 文字无缝滚动之逐条滚动

来源：互联网发布：mac终端退出vim 编辑：程序博客网时间：2024/05/17 22:44

JQ 代码: 本列子是从下向上滚动的,如果时其他方向的修改marginBttom就可以了:

(function($){$.fn.extend({RollTitle:function(opt,callback){if(!opt) var opt={};var _this = this;_this.timer = null;_this.lineH = _this.find("li:first").height();_this.line=opt.line?parseInt(opt.line,15):parseInt(_this.height()/_this.lineH,10);_this.speed=opt.speed?parseInt(opt.speed,10):500, //卷动速度，数值越大，速度越慢（毫秒_this.timespan=opt.timespan?parseInt(opt.timespan,13):1000; //滚动的时间间隔（毫秒if(_this.line==0) this.line=1;_this.upHeight=0-_this.line*_this.lineH;_this.scrollUp=function(){_this.animate({marginBottom:_this.upHeight},_this.speed,function(){for(i=1;i<=_this.line;i++){_this.find("li:first").appendTo(_this);}_this.css({marginBottom:0});});}_this.hover(function(){clearInterval(_this.timer);},function(){_this.timer=setInterval(function(){_this.scrollUp();},_this.timespan);}).mouseout();}})})(jQuery);

引用本代码:

$(document.body).ready(function(){$("#RunTopic").RollTitle({line:1,speed:500,timespan:1000});});

html代码:

<!DOCTYPE html><html><head><title>逐条滚动</title><script type="text/javascript" src="jquery-1.11.1.min.js"></script><script type="text/javascript" src="wishrun.js"></script></head><body><ul id="RunTopic"><li>文字1</li><li>文字2</li><li>文字3</li><li>文字4</li><li>文字5</li></ul></body></html>

逐条滚动,我在其他博客也见过,也比较好找,在此就不介绍了

0 0