基于jquery實現(xiàn)的文字向上跑動類似跑馬燈的效果

更新時間：2014年06月17日 17:10:28 投稿：whsnow

這篇文章主要介紹了基于jquery實現(xiàn)的文字向上跑動效果類似跑馬燈,需要的朋友可以參考下

想實現(xiàn)一個類似跑馬燈的效果,發(fā)現(xiàn)跑馬燈有空格.效果也不美觀,于是用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() 
} 

您可能感興趣的文章:

jQuery中 bind的用法簡單介紹
bind() 方法為被選元素添加一個或多個事件處理程序，并規(guī)定事件發(fā)生時運行的函數(shù)。這篇文章主要介紹了jQuery中的 bind用法,需要的朋友可以參考下
2017-02-02
jquery仿京東導航/仿淘寶商城左側分類導航下拉菜單效果
jquery實現(xiàn)下拉菜單效果，jquery寫的仿京東導航菜單，一個經(jīng)典的左側多級導航菜單，學會了可以任意改變布局，感興趣的朋友可以參考下哈，希望對你有所幫助
2013-04-04
基于JQuery和CSS3實現(xiàn)仿Apple TV海報背景視覺差特效源碼分享
這是一款效果非常炫酷的jQuery和CSS3仿Apple TV海報背景視覺差特效。該視覺差特效在使用鼠標在屏幕上下左右移動的時候，海報中的各種元素以不同的速度運動，形成視覺差效果，并且還帶有一些流光特效。
2015-09-09
基于JQuery實現(xiàn)異步刷新的代碼(轉載)
JQuery，是輕量級的js庫,把繁瑣的js代碼封裝，使調(diào)用更簡單，完成更多功能。同樣，封裝了js利用XMLHttpRequest實現(xiàn)的異步刷新.
2011-03-03
jquery中的常用事件bind、hover、toggle等示例介紹
這篇文章主要介紹了jquery中常用的事件，比如$(document).ready()、bind、hover、toggle、click等等，并有示例，易于學習
2014-07-07
淺談jQuery animate easing的具體使用方法(推薦)
下面小編就為大家?guī)硪黄獪\談jQuery animate easing的具體使用方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
jQuery彈出層插件Lightbox_me使用指南
在使用discuzx中有一個Message以及Dialog方法來顯示信息對話框。今天寫項目的時候，需要一個信息對話框，所以就著手利用lightbox_me插件來寫一個做備用。
2015-04-04
jQuery中使用validate插件校驗表單功能
這篇文章主要介紹了jQuery中使用validate插件校驗表單功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒,需要的朋友可以參考下
2019-05-05
基于jquery實現(xiàn)select選擇框內(nèi)容左右移動添加刪除代碼分享
這篇文章主要介紹了基于jquery實現(xiàn)select選擇框內(nèi)容左右移動添加刪除功能，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
jQuery插件實現(xiàn)的日歷功能示例【附源碼下載】
這篇文章主要介紹了jQuery插件實現(xiàn)的日歷功能,結合完整實例形式分析了jQuery datepicker插件實現(xiàn)日歷功能的相關操作技巧,需要的朋友可以參考下
2018-09-09