jQuery實現(xiàn)簡單的間隔向上滾動效果
更新時間：2015年03月09日 10:50:20 作者：戀冬的楓
這篇文章主要介紹了jQuery實現(xiàn)簡單的間隔向上滾動效果,實例分析了jQuery通過animate與setInterval控制dom元素滾動特效的技巧,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)簡單的間隔向上滾動效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<div id="broadcast" class="bar" name="giftactive">
<div style="float:left"><strong>間隔滾動效果：</strong></div>
<div id="demo" style="overflow:hidden;height:22px;line-height:22px;">
<ul class="mingdan" id="holder">
<li><a href="#" target="_blank">aaaaaa</a></li>
<li><a href="#" target="_blank">bbbbbb</a></li>
<li><a href="#" target="_blank">cccccc</a></li>
<li><a href="#" target="_blank">dddddd</a></li>
<li><a href="#" target="_blank">eeeeee</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
function AutoScroll(obj) {
$(obj).find("ul:first").animate({
marginTop: "-22px"
}, 500, function() {
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
});
}
$(document).ready(function() {
setInterval('AutoScroll("#demo")', 1000)
});
</script>
<div id="broadcast" class="bar" name="giftactive">
<div style="float:left"><strong>間隔滾動效果：</strong></div>
<div id="demo" style="overflow:hidden;height:22px;line-height:22px;">
<ul class="mingdan" id="holder">
<li><a href="#" target="_blank">aaaaaa</a></li>
<li><a href="#" target="_blank">bbbbbb</a></li>
<li><a href="#" target="_blank">cccccc</a></li>
<li><a href="#" target="_blank">dddddd</a></li>
<li><a href="#" target="_blank">eeeeee</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
function AutoScroll(obj) {
$(obj).find("ul:first").animate({
marginTop: "-22px"
}, 500, function() {
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
});
}
$(document).ready(function() {
setInterval('AutoScroll("#demo")', 1000)
});
</script>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
倒計時效果在我們的日常生活中經(jīng)常會用到，比如說高考倒計時、元旦放假倒計時、春節(jié)放假倒計時等等，下面通過本篇文章給大家分享基于jQuery實現(xiàn)美觀且實用的倒計時實例代碼，對jquery倒計時相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12
這篇文章主要介紹了jquery選擇器排除某個DOM元素的方法,也就是在選中的一些元素中,過濾一些不需要的,使用jquery not選擇器實現(xiàn),需要的朋友可以參考下2014-04-04
這篇文章主要介紹了jQuery中end()方法用法,實例分析了end()方法的功能、定義與回到最近的一個"破壞性"操作之前的使用技巧,需要的朋友可以參考下2015-01-01
最近做一個報表頁面顯示位置配置的界面,剛開始時用的是多個checkbox,選擇其中需要的報表即可。后來隨著業(yè)務(wù)變復(fù)雜，需要使用兩個select,選擇其中需要的到右邊select，然后提交到數(shù)據(jù)庫2013-10-10
cnblogs園子還沒提供這項功能，我們又確實有這個需求，只好自己寫一個,需要的朋友可以參考下。2010-11-11
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)五星好評，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了jQuery從零開始做一個分頁組件功能,結(jié)合實例形式分析了jQuery分頁組件的具體步驟、功能實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了jQuery簡單實現(xiàn)上下,左右滑動的方法,涉及jQuery動態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-06-06
這篇文章主要是對jquery中iframe的操作進行了詳細的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了jQuery過濾選擇器用法,包括可見性過濾:hidden、:visible,包含過濾:contains等各種常用的過濾選擇器,需要的朋友可以參考下2016-09-09