基于jquery實(shí)現(xiàn)的文字向上跑動(dòng)類似跑馬燈的效果
更新時(shí)間:2014年06月17日 17:10:28 投稿:whsnow
這篇文章主要介紹了基于jquery實(shí)現(xiàn)的文字向上跑動(dòng)效果類似跑馬燈,需要的朋友可以參考下
想實(shí)現(xiàn)一個(gè)類似跑馬燈的效果,發(fā)現(xiàn)跑馬燈有空格.效果也不美觀,于是用jquery寫了個(gè)
頁(yè)面代碼
<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()
}
頁(yè)面代碼
復(fù)制代碼 代碼如下:
<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代碼
復(fù)制代碼 代碼如下:
/*自動(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的文字滾動(dòng)跑馬燈插件(一個(gè)頁(yè)面多個(gè)滾動(dòng)區(qū))
- jQuery+CSS3文字跑馬燈特效的簡(jiǎn)單實(shí)現(xiàn)
- 基于JQuery實(shí)現(xiàn)的跑馬燈效果(文字無(wú)縫向上翻動(dòng))
- 基于jquery的文字向上跑動(dòng)類似跑馬燈的效果
- jQuery實(shí)現(xiàn)參數(shù)自定義的文字跑馬燈效果
- jQuery實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)效果的方法
- jquery 抽獎(jiǎng)小程序?qū)崿F(xiàn)代碼
- jquery實(shí)現(xiàn)九宮格大轉(zhuǎn)盤抽獎(jiǎng)
- jQuery實(shí)現(xiàn)適用于移動(dòng)端的跑馬燈抽獎(jiǎng)特效示例
相關(guān)文章
jQuery UI插件自定義confirm確認(rèn)框的方法
這篇文章主要介紹了jQuery UI插件自定義confirm確認(rèn)框的方法,實(shí)例分析了jQuery的UI插件使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03jQuery的ready方法實(shí)現(xiàn)原理分析
這篇文章主要介紹了jQuery的ready方法實(shí)現(xiàn)原理分析的相關(guān)資料,需要的朋友可以參考下2016-10-10jquery ajax post提交數(shù)據(jù)亂碼
今天發(fā)現(xiàn)在使用jquery ajax.post提交數(shù)據(jù)時(shí)會(huì)發(fā)現(xiàn)數(shù)據(jù)在ff正常,但在chrome與ie瀏覽器中post過(guò)去的數(shù)據(jù)全部是亂碼2013-11-11jQuery插件kinMaxShow擴(kuò)展效果用法實(shí)例
這篇文章主要介紹了jQuery插件kinMaxShow擴(kuò)展效果用法,實(shí)例分析了kinMaxShow擴(kuò)展的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05jQuery實(shí)現(xiàn)簡(jiǎn)易的輸入框字?jǐn)?shù)計(jì)數(shù)功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)易的輸入框字?jǐn)?shù)計(jì)數(shù)功能,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素屬性的獲取與計(jì)算相關(guān)操作技巧,需要的朋友可以參考下2017-01-01jQuery對(duì)象和DOM對(duì)象使用說(shuō)明
jQuery對(duì)象和DOM對(duì)象使用說(shuō)明,需要的朋友可以參考下。2010-06-06