基于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文字跑馬燈特效的簡(jiǎn)單實(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)特效升級(jí)版(抽獎(jiǎng)概率固定)實(shí)現(xiàn)方法
相關(guān)文章
基于jQuery Easyui實(shí)現(xiàn)登陸框界面
本文通過實(shí)例代碼給大家分享了基于jQuery Easyui實(shí)現(xiàn)登陸框界面，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2017-07-07
這篇文章主要介紹了jQuery中:hidden選擇器用法,以實(shí)例形式較為詳細(xì)的分析了:hidden選擇器的功能、定義及設(shè)置匹配元素不可見時(shí)的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jquery load事件(callback/data)使用方法及注意事項(xiàng)
jquery load 事件使用方法，在網(wǎng)上有很多的相關(guān)介紹文章，不過大同小異，本文老生長(zhǎng)談，也介紹一下load事件使用方法，感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)jquery有所幫助2013-02-02
一般對(duì)外發(fā)布的插件都應(yīng)該進(jìn)行封裝，封裝的插件還應(yīng)該符合規(guī)范，只有這樣寫的插件才具有推廣價(jià)值，并得到其他用戶的喜愛2012-08-08
jquery異常問題Uncaught?TypeError:?$(...).on?is?not?a?funct
這篇文章主要介紹了jquery異常問題Uncaught?TypeError:?$(...).on?is?not?a?function，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
用jquery獲取自定義的標(biāo)簽屬性的值簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄胘query獲取自定義的標(biāo)簽屬性的值簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
jquery實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全功能示例分享
這篇文章主要介紹了jquery實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全功能，大家參考使用吧2014-02-02
基于jquery的bankInput銀行卡賬號(hào)格式化
jquery bankInput插件是銀行卡進(jìn)行格式化顯示，能控制文本框輸入最小最大個(gè)數(shù)、控制只能輸入數(shù)字、控制不能粘貼不能使用輸入法。同時(shí)插件能實(shí)現(xiàn)自動(dòng)加載格式化顯示和支持非輸入框的格式話顯示2012-08-08
jquery插件lazyload.js延遲加載圖片的使用方法
lazyload.js是一個(gè)基于JQuery的插件，可以用來緩沖加載圖片。下面介紹這個(gè)插件的使用方法2014-02-02
jQuery EasyUI API 中文文檔 - Dialog對(duì)話框
jQuery EasyUI API 中文文檔 - Dialog對(duì)話框使用說明，需要的朋友可以參考下。2011-11-11