基于jquery实现的文字向上跑动类似跑马灯的效果
更新时间：2014年06月17日 17:10:28 投稿：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()
}
页面代码
复制代码 代码如下:
<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()
}
相关文章
这篇文章主要介绍了jQuery子窗体取得父窗体元素的方法,涉及jQuery窗体元素操作的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了JQuery中两个ul标签的li互相移动实现方法,可实现ul标签中li标签内容相互替换的技巧,涉及jQuery操作页面元素的相关技巧,需要的朋友可以参考下2015-05-05
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
通常用户在搜索内容时，在文本框输入内容前，文本框都会给出默认提示，提示用户输入正确的内容进行搜索2012-01-01
jQuery和CSS3对于web前端开发肯定用得也比较多，接下来分享一些由jQuery和CSS3制作成的特效，希望对哪些喜欢学习特效的朋友有所帮助2013-04-04
这篇文章介绍了jQuery焦点图切换特效插件封装实例，有需要的朋友可以参考一下2013-08-08
本篇文章主要是对jquery获取dom固定元素 添加样式的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了jquery实现的分页显示功能,涉及jQuery的ajax交互及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2019-08-08
我们在很多网站看到，当我们滚动网页时，网页内的广告或某个小区域并不会消失，而是浮动在屏幕的某个地方，特别是一些局域广告2012-07-07
12个jquery常用功能，极好的，分享给大家，帮助大家更好的进行jQuery开发，感兴趣的小伙伴们可以参考一下2016-07-07
DOM节点删除相信对每个初学jQuery的新手们来说都不陌生，下面这篇文章主要介绍了jQuery中DOM节点删除之empty与remove的相关资料，有需要的朋友可以参考借鉴，感兴趣的下面来一起学习学习吧。2017-01-01
最新评论