jQuery實(shí)現(xiàn)簡單的間隔向上滾動(dòng)效果
更新時(shí)間：2015年03月09日 10:50:20 作者：戀冬的楓
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單的間隔向上滾動(dòng)效果,實(shí)例分析了jQuery通過animate與setInterval控制dom元素滾動(dòng)特效的技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)簡單的間隔向上滾動(dòng)效果的方法。分享給大家供大家參考。具體實(shí)現(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>間隔滾動(dòng)效果：</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>間隔滾動(dòng)效果：</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>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- Jquery實(shí)現(xiàn)無縫向上循環(huán)滾動(dòng)列表的特效
- jQuery插件實(shí)現(xiàn)文字無縫向上滾動(dòng)效果代碼
- jquery插件之文字間歇自動(dòng)向上滾動(dòng)效果代碼
- jquery單行文字向上滾動(dòng)效果示例
- JQuery文字列表向上滾動(dòng)的代碼
- jQuery實(shí)現(xiàn)單行文字間歇向上滾動(dòng)源代碼
- jquery無縫向上滾動(dòng)實(shí)現(xiàn)代碼
- jquery多行滾動(dòng)/向左或向上滾動(dòng)/響應(yīng)鼠標(biāo)實(shí)現(xiàn)思路及代碼
- 簡短幾句jquery代碼的實(shí)現(xiàn)一個(gè)圖片向上滾動(dòng)切換
- jQuery實(shí)現(xiàn)動(dòng)態(tài)向上滾動(dòng)
相關(guān)文章
基于jQuery實(shí)現(xiàn)美觀且實(shí)用的倒計(jì)時(shí)實(shí)例代碼
倒計(jì)時(shí)效果在我們的日常生活中經(jīng)常會(huì)用到，比如說高考倒計(jì)時(shí)、元旦放假倒計(jì)時(shí)、春節(jié)放假倒計(jì)時(shí)等等，下面通過本篇文章給大家分享基于jQuery實(shí)現(xiàn)美觀且實(shí)用的倒計(jì)時(shí)實(shí)例代碼，對(duì)jquery倒計(jì)時(shí)相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-12-12
jquery選擇器排除某個(gè)DOM元素的方法（實(shí)例演示）
這篇文章主要介紹了jquery選擇器排除某個(gè)DOM元素的方法,也就是在選中的一些元素中,過濾一些不需要的,使用jquery not選擇器實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
這篇文章主要介紹了jQuery中end()方法用法,實(shí)例分析了end()方法的功能、定義與回到最近的一個(gè)"破壞性"操作之前的使用技巧,需要的朋友可以參考下2015-01-01
最近做一個(gè)報(bào)表頁面顯示位置配置的界面,剛開始時(shí)用的是多個(gè)checkbox,選擇其中需要的報(bào)表即可。后來隨著業(yè)務(wù)變復(fù)雜，需要使用兩個(gè)select,選擇其中需要的到右邊select，然后提交到數(shù)據(jù)庫2013-10-10
cnblogs中在閃存中屏蔽某人的實(shí)現(xiàn)代碼
cnblogs園子還沒提供這項(xiàng)功能，我們又確實(shí)有這個(gè)需求，只好自己寫一個(gè),需要的朋友可以參考下。2010-11-11
基于jquery實(shí)現(xiàn)五星好評(píng)
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)五星好評(píng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了jQuery從零開始做一個(gè)分頁組件功能,結(jié)合實(shí)例形式分析了jQuery分頁組件的具體步驟、功能實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
jQuery簡單實(shí)現(xiàn)上下,左右滑動(dòng)的方法
這篇文章主要介紹了jQuery簡單實(shí)現(xiàn)上下,左右滑動(dòng)的方法,涉及jQuery動(dòng)態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-06-06
這篇文章主要是對(duì)jquery中iframe的操作進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
這篇文章主要介紹了jQuery過濾選擇器用法,包括可見性過濾:hidden、:visible,包含過濾:contains等各種常用的過濾選擇器,需要的朋友可以參考下2016-09-09