基于jquery的文字向上跑動(dòng)類似跑馬燈的效果
更新時(shí)間：2014年09月22日 17:13:16 投稿：whsnow
這是一個(gè)基于jquery的文字向上跑動(dòng)，其效果類似跑馬燈，在某些情況下還是比較實(shí)用的，下面與大家分享下實(shí)現(xiàn)代碼
想實(shí)現(xiàn)一個(gè)類似跑馬燈的效果,發(fā)現(xiàn)跑馬燈有空格.效果也不美觀,于是用jquery寫了個(gè)
頁面代碼
<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代碼
/*自動(dòng)輪換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實(shí)現(xiàn)適用于移動(dòng)端的跑馬燈抽獎(jiǎng)特效示例
- 基于Jquery的文字滾動(dòng)跑馬燈插件(一個(gè)頁面多個(gè)滾動(dòng)區(qū))
- jQuery+CSS3文字跑馬燈特效的簡單實(shí)現(xiàn)
- jquery.rotate.js實(shí)現(xiàn)可選抽獎(jiǎng)次數(shù)和中獎(jiǎng)內(nèi)容的轉(zhuǎn)盤抽獎(jiǎng)代碼
- jQuery實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)效果的方法
- jquery實(shí)現(xiàn)九宮格大轉(zhuǎn)盤抽獎(jiǎng)
- jquery——九宮格大轉(zhuǎn)盤抽獎(jiǎng)實(shí)例
- jQuery實(shí)現(xiàn)類似老虎機(jī)滾動(dòng)抽獎(jiǎng)效果
- 基于jQuery實(shí)現(xiàn)的雙11天貓拆紅包抽獎(jiǎng)效果
- jquery轉(zhuǎn)盤抽獎(jiǎng)功能實(shí)現(xiàn)
- jQuery移動(dòng)端跑馬燈抽獎(jiǎng)特效升級版(抽獎(jiǎng)概率固定)實(shí)現(xiàn)方法
相關(guān)文章
有些WEB開發(fā)者，會引用一個(gè)JQuery類庫，然后在網(wǎng)頁上寫一寫$("#")，$(".")，寫了幾年就對別人說非常熟悉JQuery。其實(shí)你只是了解一點(diǎn)皮毛，并不知道其中的道理，下面通過本篇文章給大家介紹jquery定義插件的相關(guān)知識，感興趣的朋友一起學(xué)習(xí)吧2015-12-12
制作標(biāo)簽頁（通常說成滑動(dòng)門）的實(shí)現(xiàn)思路是當(dāng)鼠標(biāo)在標(biāo)簽上時(shí)下面div會顯示和標(biāo)簽相對應(yīng)的內(nèi)容，隨著標(biāo)簽的改變，下面的div也會對應(yīng)改變內(nèi)容2010-05-05
jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)背景變化的動(dòng)態(tài)菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)響應(yīng)鼠標(biāo)背景變化的動(dòng)態(tài)菜單效果代碼,涉及jquery鼠標(biāo)mouseover事件操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了基于jquery自定義顯示消息數(shù)量，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
下面小編就為大家?guī)硪黄獙?shí)用jquery操作表單元素的簡單代碼。小編覺得挺不錯(cuò)的， 現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了jQuery中:contains選擇器用法,以實(shí)例形式分析了:contains選擇器的功能、定義及匹配給定元素文本時(shí)的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jquery在項(xiàng)目中做復(fù)選框時(shí)遇到的一些問題筆記
在實(shí)踐中還是遇到了很多的問題，注意在input的checkbox中，用普通的attr屬性來判斷是不可以的，因?yàn)閏hecked的值是checked，因此做個(gè)筆記2013-11-11
jquery如何獲取元素的滾動(dòng)條高度等實(shí)現(xiàn)代碼
這篇文章主要介紹了jquery如何獲取元素的滾動(dòng)條高度等實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-10-10
jQuery實(shí)現(xiàn)動(dòng)態(tài)表單驗(yàn)證時(shí)文本框抖動(dòng)效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)表單驗(yàn)證時(shí)文本框抖動(dòng)效果,可實(shí)現(xiàn)表單元素左右晃動(dòng)的抖動(dòng)功能,涉及jquery中元素的匹配與動(dòng)畫animate效果實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了jQuery中append()方法用法,實(shí)例分析了append()方法的功能、定義及在匹配元素的結(jié)尾插入指定內(nèi)容的使用技巧,需要的朋友可以參考下2015-01-01