基于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 checkbox全选/取消全选实现代码
Nov 14 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 Javascript
js实现音乐播放控制条
Sep 09 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
微信小程序如何访问公众号文章
Jul 08 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
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写的带缓存数据功能的mysqli类
2012/09/06 PHP
php实现的ping端口函数实例
2014/11/12 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
2013/03/24 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
2017/09/19 NodeJs
微信小程序实现侧边栏分类
2019/10/21 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
python避免死锁方法实例分析
2015/06/04 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
python动态进度条的实现代码
2019/07/03 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
Python 实现一个计时器
2020/07/28 Python
python利用opencv保存、播放视频
2020/11/02 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
路政管理专业个人自荐信范文
2013/11/30 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
活动总结报告范文
2014/05/04 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
2015年学校综合治理工作总结
2015/07/20 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书