基于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() 
} 

您可能感兴趣的文章:

8个超实用的jQuery功能代码分享
这篇文章主要介绍了8个超实用的jQuery功能代码分享,本文介绍了禁用右键单击功能、使用jQuery设定文本大小、在新窗口打开链接、更改样式列表、返回到顶部链接、获取鼠标指针X/Y轴等功能代码,需要的朋友可以参考下
2015-01-01
jQuery UI插件自定义confirm确认框的方法
这篇文章主要介绍了jQuery UI插件自定义confirm确认框的方法,实例分析了jQuery的UI插件使用技巧,非常具有实用价值,需要的朋友可以参考下
2015-03-03
浅谈jQuery效果函数
下面小编就为大家带来一篇jQuery效果函数。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
2016-09-09
jQuery的ready方法实现原理分析
这篇文章主要介绍了jQuery的ready方法实现原理分析的相关资料,需要的朋友可以参考下
2016-10-10
jQuery实现模糊查询的方法分析
这篇文章主要介绍了jQuery实现模糊查询的方法,结合实例形式分析了jQuery事件响应、节点遍历、查询匹配、属性修改等相关操作技巧,需要的朋友可以参考下
2018-05-05
jquery ajax post提交数据乱码
今天发现在使用jquery ajax.post提交数据时会发现数据在ff正常，但在chrome与ie浏览器中post过去的数据全部是乱码
2013-11-11
Jquery Mobile 自定义按钮图标
很多朋友都反应jquery mobile自带的图标真的是少之又少，另外我也觉得图标偏小(系统自带的是18*18的），于是琢磨着如何自定义按钮图标，下面小编把我的方法分享在脚本之家平台供大家借鉴
2015-11-11
jQuery插件kinMaxShow扩展效果用法实例
这篇文章主要介绍了jQuery插件kinMaxShow扩展效果用法,实例分析了kinMaxShow扩展的使用技巧,非常具有实用价值,需要的朋友可以参考下
2015-05-05
jQuery实现简易的输入框字数计数功能示例
这篇文章主要介绍了jQuery实现简易的输入框字数计数功能,结合实例形式分析了jQuery针对页面元素属性的获取与计算相关操作技巧,需要的朋友可以参考下
2017-01-01
jQuery对象和DOM对象使用说明
jQuery对象和DOM对象使用说明，需要的朋友可以参考下。
2010-06-06