基于jquery的文字向上跑动类似跑马灯的效果
更新时间：2014年09月22日 17:13:16 投稿：whsnow
这是一个基于jquery的文字向上跑动，其效果类似跑马灯，在某些情况下还是比较实用的，下面与大家分享下实现代码
想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用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()
}
相关文章
jsTree(JQuery) 排序节点 Bug的解决方法。2011-07-07
关于hashchangebroker和statehashable的补充文档
我觉得之前写的两篇随笔有点不负责任，完全没写明白，补充了一份文档（权且算是文档吧=.=）2011-08-08
这篇文章主要为大家详细介绍了jquery.pager.js实现分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章介绍了jQuery操作value值的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要介绍了jQuery动态修改超链接地址的方法,实例分析了jQuery中attr方法的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-02-02
本篇文章主要是对jquery实现checkbox全选全不选的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
本篇文章是jQuery中的日期选择器进行了详细的分析介绍，需要的朋友参考下2013-06-06
这篇文章主要介绍了Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果,需要的朋友可以参考下2017-10-10
下面小编就为大家带来一篇使用JQuery实现图片轮播效果的实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了jQuery实现QQ空间汉字转拼音功能,结合具体实例形式分析了jQuery实现拼音与中文汉字的转换操作实现技巧,需要的朋友可以参考下2017-07-07
最新评论