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

更新时间：2010年07月26日 14:00:55 作者：

文字逐行或多行滚动跑马灯插件，基于Jquery。命名为Jquery.RollTitle。支持在一个页面声明多个滚动区 (就为了要这点才写了这个)

兼容各浏览器的文本行高

 
(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> 

您可能感兴趣的文章:

jQuery实现文章图片弹出放大效果
本文主要介绍jQuery实现文章图片弹出放大效果的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
2017-04-04
jQuery的初始化与对象构建之浅析
之前本人的工作和学习多以原生js 为主，对jQuery 一直都不是很了解，但jQuery 作为当今最优秀的js 类库之一，必须是要花时间好好学习下的，今天正好蛋疼，读了里面一些代码
2011-04-04
jquery实现的省市区三级联动
在做项目的时候，我们经常需要用到地址之类的省市区三级联动的，今天就给大家分享一个非常简洁的省市区三级联动的代码，基于jQuery，附上GIT地址，有需要的小伙伴可以直接拿走
2015-04-04
扩展jquery实现客户端表格的分页、排序功能代码
下面链接中是我用jQuery的扩展来实现的表格分页和排序，使用这个扩展必须加上表头<thead>和<tbody>标签，因为我是通过<tbody>来进行分页的，要是不加thead，那么表头也要作为分页计算时的一个行了。
2011-03-03
jQuery无刷新上传之uploadify3.1简单使用
本文主要介绍jQuery插件uploadify3.1的简单使用，希望能帮到大家，有需要的朋友可以参考一下。
2016-06-06
jquery中post方法用法实例
这篇文章主要介绍了jquery中post方法用法,以实例的形式分析了post方法的具体用法,并对相关的知识点及注意点进行了较为深入的分析,需要的朋友可以参考下
2014-10-10
jQuery鼠标事件汇总
鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的语法和用法
2015-08-08
jquery实现鼠标滑过显示二级下拉菜单效果
这篇文章主要介绍了jquery实现鼠标滑过显示二级下拉菜单效果,通过jquery操作鼠标事件及页面样式动态变换实现该功能,非常具有实用价值,需要的朋友可以参考下
2015-08-08
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
这篇文章主要介绍了jQuery插入节点和移动节点的方法,结合实例形式分析了insertAfter和insertBefore方法针对页面元素节点操作的使用技巧,需要的朋友可以参考下
2016-09-09
用jQuery实现的模拟下拉框代码
用jQuery制作模拟下拉框浏览器自带的下拉框样式不好看。在ie6下，下拉框的优先级大于层，经常导致下拉框显示在层的上面。
2010-03-03