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(相關css不做贅述),想要循環(huán)顯示li里面的內容就是在制定的時間將ul向上移動li的高度,于此同時將第一個li加到ul中l(wèi)i的末尾。
代碼如下:
復制代碼 代碼如下:
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)
您可能感興趣的文章:
- jQuery控制li上下循環(huán)滾動插件用法實例(附demo源碼下載)
- 多種JQuery循環(huán)滾動文字圖片效果代碼
- jQuery實現(xiàn)列表自動滾動循環(huán)滾動展示新聞
- jQuery循環(huán)滾動新聞列表示例代碼
- jQuery實現(xiàn)列表自動循環(huán)滾動鼠標懸停時停止?jié)L動
- jQuery循環(huán)滾動展示代碼 可應用到文字和圖片上
- 基于jQuery的公告無限循環(huán)滾動實現(xiàn)代碼
- JQuery循環(huán)滾動圖片代碼
- 基于jquery可配置循環(huán)左右滾動例子
- 基于jquery的內容循環(huán)滾動小模塊(仿新浪微博未登錄首頁滾動微博顯示)
- 使用jquery實現(xiàn)的循環(huán)連續(xù)可停頓滾動實例
相關文章
jquery實現(xiàn)帶復選框的表格行選中刪除時高亮顯示
在實際的應用中可能會出現(xiàn)表格中帶復選框的,刪除時,將復選框所在的行的記錄刪除。在這的地方,可以加個特效,單擊某行的同時將該行的復選框選中,該行的背景色也高亮顯示2013-08-08一個jquery實現(xiàn)的不錯的多行文字圖片滾動效果
本節(jié)與大家分享的多行文字圖片滾動效果,基于jquery實現(xiàn),比較實用,有喜歡的朋友可以收藏下2014-09-09jQuery解決下拉框select設寬度時IE 6/7/8下option超出顯示不全
jQuery解決IE 6/7/8 BUG:下拉框select設寬度時option超出顯示不全,經過修改效果還不錯,遇到類似情況的朋友可以參考下哈2013-05-05jquery.tagsinput.js實現(xiàn)記錄checkbox勾選的順序
這篇文章主要為大家詳細介紹了jquery.tagsinput.js實現(xiàn)記錄checkbox勾選的順序,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-09-09JQuery的Ajax請求實現(xiàn)局部刷新的簡單實例
本篇文章只要是對JQuery的Ajax請求實現(xiàn)局部刷新的簡單實例進行了詳細的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02ASP.NET jQuery 實例18 通過使用jQuery validation插件校驗DropDownList
這節(jié)我們還可以通過直接設置DropDownList屬性來設置jQuery validation插件的校驗規(guī)則和提示信息2012-02-02