基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

兼容各浏览器的文本行高复制代码代码如下: (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):3000, //卷动速度，数值越大，速度越慢（毫秒 _this.timespan=opt.timespan?parseInt(opt.timespan,13):5000; //滚动的时间间隔（毫秒 if(_this.line==0) this.line=1; _this.upHeight=0-_this.line*_this.lineH; _this.scrollUp=function(){ _this.animate({ marginTop:_this.upHeight },_this.speed,function(){ for(i=1;i<=_this.line;i++){ _this.find("li:first").appendTo(_this); } _this.css({marginTop:0}); }); } _this.hover(function(){ clearInterval(_this.timer); },function(){ _this.timer=setInterval(function(){_this.scrollUp();},_this.timespan); }).mouseout(); } }) })(jQuery); 调用方法： line:一次卷动的文本行数 speed:卷动动画的时间 timespan:间隔时间复制代码代码如下: <html> <body> <ul id="RunTopic"> <li>文字1</li> <li>文字2</li> <li>文字3</li> <li>文字4</li> <li>文字5</li> </ul> </body> <script type="text/javascript"> $(document.body).ready(function(){ $("#RunTopic").RollTitle({line:1,speed:200,timespan:1500}); }); </script> </html>

　　推荐阅读

　　基于jsTree的无限级树JSON数据的转换代码

jstree 主页 : http://www.jstree.com/ 其中提供了一种从后台取数据渲染成树的形式：复制代码代码如下: $("#mytree").tree({ data : { type : "json", url : "${ctx}/user/power!list.do" } }); 对于url中返回的>>>详细阅读

本文标题：基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

地址：http://www.17bianji.com/kaifa2/JS/25948.html

1/2 1