快捷導(dǎo)航

jquery實現(xiàn)文字由下到上循環(huán)滾動的實例代碼

更新時間：2013年08月09日 11:11:46 作者：

這篇文章介紹了jquery實現(xiàn)文字由下到上循環(huán)滾動的實例代碼，有需要的朋友可以參考一下

有如下代碼：

<div id="oDiv">
<ul id="oUl">
<li>第1個li元素</li>
<li>第2個li元素</li>
<li>第3個li元素</li>
<li>第4個li元素</li>
<li>第5個li元素</li>
<li>第6個li元素</li>
<li>第7個li元素</li>
<li>第8個li元素</li>
</ul>
</div>

但是頁面只顯示前5個li(相關(guān)css不做贅述)，想要循環(huán)顯示li里面的內(nèi)容就是在制定的時間將ul向上移動li的高度，于此同時將第一個li加到ul中l(wèi)i的末尾。
　　代碼如下：

復(fù)制代碼代碼如下:

function autoScroll(obj, ul_bz){
$(obj).find(ul_bz).animate({
marginTop : "-25px"
},500,function(){
$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
});
}
setInterval('autoScroll("#oDiv", "#oUl")',3000)

您可能感興趣的文章:

相關(guān)文章

基于DOM節(jié)點刪除之empty和remove的區(qū)別(詳解)
下面小編就為大家?guī)硪黄贒OM節(jié)點刪除之empty和remove的區(qū)別(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
jQuery實現(xiàn)的卷簾門滑入滑出效果【案例】
這篇文章主要介紹了jQuery實現(xiàn)的卷簾門滑入滑出效果,結(jié)合具體實例形式分析了jQuery事件綁定及slideToggle方法實現(xiàn)滑入滑出效果相關(guān)操作技巧,需要的朋友可以參考下
2019-02-02
easyui messager alert 三秒后自動關(guān)閉提示的實例
下面小編就為大家?guī)硪黄猠asyui messager alert 三秒后自動關(guān)閉提示的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
基于jQuery實現(xiàn)點擊列表加載更多效果
這篇文章主要為大家詳細(xì)介紹了基于jQuery實現(xiàn)點擊列表加載更多效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-05-05
jQuery的Ajax用戶認(rèn)證和注冊技術(shù)實例教程(附demo源碼)
這篇文章主要介紹了jQuery的Ajax用戶認(rèn)證和注冊技術(shù),結(jié)合完整實例較為詳細(xì)的分析講解了jQuery中ajax方法實現(xiàn)用戶驗證與注冊的相關(guān)技巧與注意事項,并附帶了demo源碼供讀者下載,需要的朋友可以參考下
2015-12-12
jQuery延遲執(zhí)行的實現(xiàn)方法
這篇文章主要介紹了jQuery延遲執(zhí)行的實現(xiàn)方法,結(jié)合簡單實例形式分析了jQuery針對無法同步執(zhí)行的情況使用延遲執(zhí)行的操作技巧,需要的朋友可以參考下
2016-12-12
jquery img src 獲取實現(xiàn)代碼
利用jquery 取得IMG src的問題，有需要的朋友可以參考下。
2009-05-05
jquery提示 "object expected"的解決方法
在測試代碼的時候，提示object expected，下面的解決方法，可以參考下。
2009-12-12
jQuery實現(xiàn)下拉框選擇圖片功能實例
這篇文章主要介紹了jQuery實現(xiàn)下拉框選擇圖片功能,可實現(xiàn)帶圖片的下拉列表功能,涉及jquery插件imageselect.js的使用,需要的朋友可以參考下
2015-08-08
jQuery打印指定區(qū)域Html頁面并自動分頁
項目中需要用到打印HTML頁面，需要指定區(qū)域打印，使用jquery.PrintArea.js 插件實現(xiàn)分頁,需要的朋友可以參考下
2014-07-07