基于jquery的文字向上跑动类似跑马灯的效果


Posted in Javascript onSeptember 22, 2014

想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用jquery写了个

页面代码

<div class="recordList"> 
<ul class="tpl-rotate-recordList" style="margin-top: 0px;"> 
<li class="tpl-rotate-recordList-item"> 
恭喜187****5204获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜137****1372获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜156****0276获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜139****9856获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜136****0580获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜136****0580获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜138****8118获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜136****5555获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜136****0580获得1000RBM 
</li> 
<li class="tpl-rotate-recordList-item"> 
恭喜136****0580获得1000RBM 
</li> 
</ul> 
</div>

js代码

/*自动轮换xuyw*/ 
var AutoScroll = function(a) { 
$(a).find("ul:first").animate( { 
marginTop : "-20px" 
}, 500, function() { 
$(this).css( { 
marginTop : "0px" 
}).find("li:first").appendTo(this) 
}) 
} 
if ($(".recordList ul li").length > 0) { 
setInterval('AutoScroll(".recordList")', 2000) 
} else { 
$(".recordList").hide() 
}
Javascript 相关文章推荐
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
详解使用React进行组件库开发
Feb 06 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
浅析JavaScript 函数柯里化
Sep 08 Javascript
一个JavaScript处理textarea中的字符成每一行实例
Sep 22 #Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 #Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 #Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 #Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 #Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 #Javascript
Javascript中call与apply的学习笔记
Sep 22 #Javascript
You might like
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
PHP中批量生成静态html(命令行下运行PHP)
2014/04/19 PHP
php将文本文件转换csv输出的方法
2014/12/31 PHP
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
python和C语言混合编程实例
2014/06/04 Python
Python的Flask框架与数据库连接的教程
2015/04/20 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
django的model操作汇整详解
2019/07/26 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
Python super()函数使用及多重继承
2020/05/06 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
摩顿布朗英国官方网上商店:奢华沐浴、身体和头发护理
2016/10/29 全球购物
亚马逊印度站:Amazon.in
2017/10/15 全球购物
美国渔具店:FishUSA
2019/08/07 全球购物
文员自我评价怎么写
2013/09/19 职场文书
自考生自我评价分享
2014/01/18 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python
Java版 单机五子棋
2022/05/04 Java/Android