基于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中Math对象使用说明
Jan 16 Javascript
JavaScript 克隆数组最简单的方法
Feb 12 Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
javascript innerHTML使用分析
Dec 03 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
Jan 15 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
使用jQuery加载html页面到指定的div实现方法
Jul 13 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
js控制随机数生成概率代码实例
Mar 21 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下intval()和(int)转换使用与区别
2008/07/18 PHP
PHP 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
TNC vs IO BO3 第二场2.13
2021/03/10 DOTA
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
JS中如何轻松遍历对象属性的方式总结
2019/08/06 Javascript
python 自动提交和抓取网页
2009/07/13 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
pyqt5实现按钮添加背景图片以及背景图片的切换方法
2019/06/13 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
估算杭州有多少软件工程师
2015/08/11 面试题
阿德的梦教学反思
2014/02/06 职场文书
优秀公益广告词大全
2014/03/19 职场文书
《春雨》教学反思
2014/04/24 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
公司承诺函范文
2015/01/21 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
Python中可变和不可变对象的深入讲解
2021/08/02 Python