基于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()
}
頁面代碼
復(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ù)制代碼 代碼如下:
/*自動輪換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()
}
相關(guān)文章
jQuery UI插件自定義confirm確認(rèn)框的方法
這篇文章主要介紹了jQuery UI插件自定義confirm確認(rèn)框的方法,實例分析了jQuery的UI插件使用技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03jquery 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-11jQuery插件kinMaxShow擴(kuò)展效果用法實例
這篇文章主要介紹了jQuery插件kinMaxShow擴(kuò)展效果用法,實例分析了kinMaxShow擴(kuò)展的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05jQuery實現(xiàn)簡易的輸入框字?jǐn)?shù)計數(shù)功能示例
這篇文章主要介紹了jQuery實現(xiàn)簡易的輸入框字?jǐn)?shù)計數(shù)功能,結(jié)合實例形式分析了jQuery針對頁面元素屬性的獲取與計算相關(guān)操作技巧,需要的朋友可以參考下2017-01-01