DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery實現文字由下到上循環滾動的實例代碼
jquery實現文字由下到上循環滾動的實例代碼
編輯:JQuery特效代碼     

有如下代碼:
. 代碼如下:
<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(相關css不做贅述),想要循環顯示li裡面的內容就是在制定的時間將ul向上移動li的高度,於此同時將第一個li加到ul中li的末尾。
  代碼如下:
. 代碼如下:
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)

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved