基于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 跨域和ajax 跨域问题小结
Jul 01 Javascript
JS实现商品倒计时实现代码
May 03 Javascript
JQuery动画与特效实例分析
Feb 02 Javascript
JavaScript对象参数的引用传递
Jan 14 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
JS实现九宫格拼图游戏
Jun 28 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获取地址栏信息的代码
2008/10/08 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
解析php取整的几种方式
2013/06/25 PHP
PHP实现手机号码中间四位用星号(*)隐藏的自定义函数分享
2014/09/27 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
Js 中debug方式
2010/02/07 Javascript
JavaScript 事件系统
2010/07/22 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
详解如何让Express支持async/await
2017/10/09 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python使用email模块对邮件进行编码和解码的实例教程
2016/07/01 Python
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
工作中个人的自我评价
2013/12/31 职场文书
销售提升方案
2014/06/07 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
毕业典礼邀请函
2015/01/31 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
放假通知怎么写
2015/08/18 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
sql server 累计求和实现代码
2022/02/28 SQL Server
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android