基于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 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
Javascript 获取LI里的内容
Dec 17 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
javascript定时保存表单数据的代码
Mar 17 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
Mar 17 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 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自动更新新闻DIY
2006/10/09 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
原生js实现淘宝购物车功能
2020/06/23 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
Python中datetime模块参考手册
2017/01/13 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
Python3 chardet模块查看编码格式的例子
2019/08/14 Python
python数值基础知识浅析
2019/11/19 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
COS美国官网:知名服装品牌
2019/04/08 全球购物
测绘工程系学生的自我评价
2013/11/30 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
2014年车间工作总结
2014/11/21 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
css弧边选项卡的项目实践
2023/05/07 HTML / CSS