基于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 相关文章推荐
javascript 日期常用的方法
Nov 11 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
js前端导出Excel的方法
Nov 01 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
javascript操作向表格中动态加载数据
Aug 27 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往XML中添加节点的方法
2015/03/12 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
PHP简单获取随机数的常用方法小结
2017/06/07 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
JS event使用方法详解
2008/04/28 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
基于mpvue的小程序项目搭建的步骤
2018/05/22 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
Python时间和字符串转换操作实例分析
2019/03/16 Python
详解python和matlab的优势与区别
2019/06/28 Python
Python之pymysql的使用小结
2019/07/01 Python
python文件操作的简单方法总结
2019/11/07 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
天猫国际进口超市直营:官方直采,一站购齐
2017/12/11 全球购物
大学军训通讯稿
2014/01/13 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
老干部工作先进事迹
2014/08/17 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
2014年法院工作总结
2014/11/24 职场文书