基于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()
}
頁面代碼
復制代碼 代碼如下:
<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功能代碼分享,本文介紹了禁用右鍵單擊功能、使用jQuery設定文本大小、在新窗口打開鏈接、更改樣式列表、返回到頂部鏈接、獲取鼠標指針X/Y軸等功能代碼,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了jQuery UI插件自定義confirm確認框的方法,實例分析了jQuery的UI插件使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
下面小編就為大家?guī)硪黄猨Query效果函數(shù)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-09-09
這篇文章主要介紹了jQuery的ready方法實現(xiàn)原理分析的相關資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了jQuery實現(xiàn)模糊查詢的方法,結合實例形式分析了jQuery事件響應、節(jié)點遍歷、查詢匹配、屬性修改等相關操作技巧,需要的朋友可以參考下2018-05-05
jquery ajax post提交數(shù)據(jù)亂碼
今天發(fā)現(xiàn)在使用jquery ajax.post提交數(shù)據(jù)時會發(fā)現(xiàn)數(shù)據(jù)在ff正常，但在chrome與ie瀏覽器中post過去的數(shù)據(jù)全部是亂碼2013-11-11
很多朋友都反應jquery mobile自帶的圖標真的是少之又少，另外我也覺得圖標偏小(系統(tǒng)自帶的是18*18的），于是琢磨著如何自定義按鈕圖標，下面小編把我的方法分享在腳本之家平臺供大家借鑒2015-11-11
這篇文章主要介紹了jQuery插件kinMaxShow擴展效果用法,實例分析了kinMaxShow擴展的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05
jQuery實現(xiàn)簡易的輸入框字數(shù)計數(shù)功能示例
這篇文章主要介紹了jQuery實現(xiàn)簡易的輸入框字數(shù)計數(shù)功能,結合實例形式分析了jQuery針對頁面元素屬性的獲取與計算相關操作技巧,需要的朋友可以參考下2017-01-01
jQuery對象和DOM對象使用說明，需要的朋友可以參考下。2010-06-06