基于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 相关文章推荐
关于文本框的一些限制控制总结~~
Apr 15 Javascript
jQuery Mobile 和 Kendo UI 的比较
May 05 Javascript
浅析Bootstrap表格的使用
Jun 23 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
详解vue渲染函数render的使用
Dec 12 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 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制作图型计数器的例子
2006/10/09 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
php设计模式之单例模式代码
2016/06/11 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
[01:46]2018完美盛典章节片——坚守
2018/12/17 DOTA
Python中random模块用法实例分析
2015/05/19 Python
pytorch 共享参数的示例
2019/08/17 Python
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
如何理解委托
2012/01/06 面试题
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
酒店应聘自荐信
2013/11/09 职场文书
一封普通求职者的求职信
2013/11/20 职场文书
有关爱国演讲稿
2014/05/07 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
MySQL数据库简介与基本操作
2022/05/30 MySQL