JS 跑马灯效果实现（很好用）
原文地址为： JS 跑马灯效果实现（很好用）
实现跑马灯效果的JS很多，但是很多不好用，下面介绍一个比较好用的。
好用之处在于：
1 支持一个页面多个跑马灯效果
2.支持跑马灯内容的异步加载
关键的实现代码，如果看不懂，可以跑这个列子
<body>
<ul id="RunTopic">
<li>文字1</li>
<li>文字2</li>
<li>文字3</li>
<li>文字4</li>
<li>文字5</li>
</ul>
<br>
<input type="button" οnclick="test();" value="test">
<script type="text/javascript">
function test()
{
$("#RunTopic").find("li:first").appendTo($("#RunTopic"));
}
</script>
</body>
另外，也可以使用HTML的marquee 标签，我刚测试而来下，chrome，IE8，火狐都支持！
如：
<a href="#">纤云弄巧，飞星传恨，银汉迢迢暗度。</a><br />
<a href="#">金风玉露一相逢，便胜却、人间无数。</a><br />
<a href="#">柔情似水，佳期如梦。忍顾鹊桥归路！</a><br />
<a href="#">两情若是久长时，又岂在、朝朝暮暮。</a><br />
<a href="#">千重劫，百世难，亘古匆匆，弹指间！</a><br />
<a href="#">不死躯，不灭魂，震古烁今，无人敌！</a><br />
<a href="#">待到阴阳逆乱时，以我魔血染青天！</a><br />
</marquee>
########################################################################################
JS代码：
(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);
HTML代码：
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>
转载请注明本文地址： JS 跑马灯效果实现（很好用）
JS 跑马灯效果实现（很好用）相关推荐
- 手机端html跑马灯效果,js实现跑马灯效果 很好用
[]代码库 html head 实现跑马灯效果 *{ font-; font-宋体,; }/*规定了所有的字体样式*/ body{ ; } #mq{ ; height:40px; line-heigh ...
- web展现mysql_web页面实现LED跑马灯效果(涉及web前端、原生JS、PHP、mysql)
本帖最后由 yoin 于 2019-11-21 16:24 编辑 产品需求: LED跑马灯页面展示内容(班级电脑展示) setLED更改内容(老师电脑更改内容) LED页面及时更新内容设计思路: 最初 ...
- js html css 图片跑马灯效果（轮播）
js html css 图片跑马灯效果(轮播) js html css 实现图片跑马灯效果(轮播),效果图如下: 代码: html: <div id="marquee-box" ...
- 原生js实现跑马灯效果，鼠标放下可以停止跑动
js原生代码跑马灯效果纯js代码如下: 1.首先html的内容(里面图片自己可以换,li里面也可以填文字) <div> <ul><li>呵呵呵呵呵3</li& ...
- 原生js的图片.文字.小框的跑马灯效果及弹幕效果
笔者在最近的一个点上项目中使用原生js遇到一个跑马灯效果,需要图片循环播放,可以根据图片的多少改变一定的样式,从而实现跑马灯效果.于是把图片的,文字的和另一种小框的都整合了一下,顺便基于小框的跑马灯增 ...
- 分别用Js和vue实现跑马灯效果
写在前面: 我是「扬帆向海」,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴 ...
- 跑马灯抽奖js php,文字跑马灯效果的完成
文字跑马灯效果的完成 发表于2019-06-09 21:14| 次阅读| 来源网络整理| 作者session 摘要:跑马灯效果在很多页面上也常常出现,本文次要为大家具体引见微信小程序完成文字跑马灯效果 ...
- html文本框中加入跑马灯,js文本框走动跑马灯效果代码分享
本文实例讲述了js实现文本框走动跑马灯效果.分享给大家供大家参考.具体如下: 运行效果图: 小提示:直接复制下面分享的代码即可运行,大家可以自定义文字. 为大家分享的js实现文本框走动跑马灯效果代码如 ...
- JS写一个列表跑马灯效果--基于touchslide.js
先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...
最新文章
- GSM中时隙、信道、突发序列、帧的解释
- 错误3 error C3859: 超过了 PCH 的虚拟内存范围；请使用“-Zm120”
- Pycharm连接git服务器的方法
- mysql查询员工排班信息_考勤管理信息系统人员排班管理及查询
- mysql存储过程删除重复记录
- unity2018关联不到vs_现实VS真爱：远嫁的幸福和悲哀
- Linux 编译安装Boost
- Zookeeper(一)——简介
- java面试算法总结_面试10大算法汇总——Java篇
- 软件开发之韵：和谐敏捷
- IO流 Buffered 综合练习
- Android---------------Handler的学习
- System.Timers.Timer(定时器)
- win7怎么安装消息队列 MSMQ
- (一) MySQL学习笔记：MySQL安装图解
- MariaDB安装教程
- Error处理： android.media.MediaRecorder.start(Native Method) 报错：start failed: -19
- 常见web中间件及其漏洞概述
- 步步高彭雄：弄潮“互联网+零售”从端到端流程开始
- 2022年长三角地区数学建模B题：齿轮箱故障诊断