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


Posted in Javascript onJuly 26, 2010

兼容各浏览器的文本行高

(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>
Javascript 相关文章推荐
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
Feb 04 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
原生js简单实现放大镜特效
May 16 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
Aug 14 Javascript
JavaScript内置对象之Array的使用小结
May 12 Javascript
ES6 解构赋值的原理及运用
May 25 Javascript
SSM VUE Axios详解
Oct 05 Vue.js
JQuery的Validation插件中Remote验证的中文问题
Jul 26 #Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 #Javascript
jQuery getJSON 处理json数据的代码
Jul 26 #Javascript
基于jQuery的可以控制左右滚动及自动滚动效果的代码
Jul 25 #Javascript
用jquery实现下拉菜单效果的代码
Jul 25 #Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 #Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 #Javascript
You might like
PHP 关于访问控制的和运算符优先级介绍
2013/07/08 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
msn上的tab功能Firefox对childNodes处理的一个BUG
2008/01/21 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
create-react-app构建项目慢的解决方法
2018/03/14 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
python生成带有表格的图片实例
2019/02/03 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
中医药大学市场营销专业自荐信
2013/09/29 职场文书
参观监狱心得体会
2014/01/02 职场文书
生产班组长岗位职责
2014/01/05 职场文书
师德个人剖析材料
2014/02/02 职场文书
活动总结报告格式
2014/05/09 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
社会实践活动总结
2015/02/05 职场文书
现役军人家属慰问信
2015/03/24 职场文书
教师工作证明范本
2015/06/12 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS