JS中for循序中延遲加載動(dòng)態(tài)效果的具體實(shí)現(xiàn)
更新時(shí)間：2013年08月18日 16:28:26 作者：
今天在做一個(gè)前端的效果的時(shí)候碰到一個(gè)棘手的問題，就是實(shí)現(xiàn)一個(gè)動(dòng)態(tài)的圓柱效果，廢話不多少，直接上代碼
復(fù)制代碼 代碼如下:
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
for(var i=1; i<6;i++)
{
var a=$("#zhong"+i+"").height(); //獲取高度
$("#zhong"+i+"").attr("OldHeight",a); //設(shè)置OldHeight屬性
}
var e=0; //定義一個(gè)值
interid=setInterval(Showgao,30); //setInerval 每隔30ms加載一次
function Showgao()
{
e++;
for(var x=1;x<6;x++)
{
var b= $("#zhong"+x+"").attr("OldHeight");
if(typeof(b) == "undefined"||b!="")
{
if(e>b){$("#zhong"+x+"").height(b);}
else{$("#zhong"+x+"").height(e);}
}
}
if(e==1000){clearInterval(interid);}
}
});
</script>
再看看HTML代碼
復(fù)制代碼 代碼如下:
<div class="zhu no1">
<div class="tou"><img src="images/toubg.png" /></div>
<div id="zhong1" class="zhong" style="height:66px;"></div>
<div class="wei"><img src="images/weibg.png" /></div>
</div>
<div class="zhu no2">
<div class="tou"><img src="images/toubg.png" /></div>
<div id="zhong2" class="zhong" style="height:0px;"></div>
<div class="wei"><img src="images/weibg.png" /></div>
</div>
<div class="zhu no3">
<div class="tou"><img src="images/toubg.png" /></div>
<div id="zhong3" class="zhong" style="height:22px;"></div>
<div class="wei"><img src="images/weibg.png" /></div>
</div>
<div class="zhu no4">
<img src="images/huisebg.png" />
</div>
實(shí)現(xiàn)的效果是這樣的，我的意思不知道大家能不能明白，其實(shí)就是先定好這個(gè)圓柱的高度，然后用JS動(dòng)態(tài)的從0往上升，最好達(dá)到設(shè)定好的高度
相關(guān)文章
淺談JavaScript中setInterval和setTimeout的使用問題
這篇文章主要介紹了淺談JavaScript中setInterval和setTimeout的使用問題,作者建議在任務(wù)龐大時(shí)盡量避免使用setInterval,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JavaScript中的Math.LN2屬性用法詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
javascript下for循環(huán)用法小結(jié)
javascript下for循環(huán)用法小結(jié)...2007-07-07
document.getElementById獲取控件對象為空的解決方法
今天寫個(gè)網(wǎng)頁，想在頁面加載onLoad時(shí)，動(dòng)態(tài)顯示由后臺其他程序傳來的數(shù)據(jù)時(shí)，用document.getElementById獲取控件對象總是為空。但是檢查了這個(gè)id確實(shí)是存在的。看下文的示例和解決方法2013-11-11
如何使用mailto？對于大多數(shù)人來說并不是很陌生，但是實(shí)用上的細(xì)節(jié)部分你們有沒有注意到，接下來分享一下本人在使用過程中的經(jīng)驗(yàn)，需要了解的朋友可以參考下2012-12-12
Javascript學(xué)習(xí)筆記之相等符號與嚴(yán)格相等符號
本文詳細(xì)介紹了javascript中的相等符號以及嚴(yán)格相等符號,需要的朋友可以參考下2014-11-11
完美解決JS中漢字顯示亂碼問題（已解決）...2006-12-12
Javascript 動(dòng)態(tài)改變imput type屬性
這篇文章主要介紹了Javascript 動(dòng)態(tài)改變imput type屬性的相關(guān)資料,并附簡單實(shí)例代碼，需要的朋友可以參考下2016-11-11
Js中sort()方法的用法，需要的朋友可以參考下。2006-11-11
JavaScript學(xué)習(xí)筆記整理_簡單實(shí)現(xiàn)枚舉類型,撲克牌應(yīng)用
下面小編就為大家?guī)硪黄狫avaScript學(xué)習(xí)筆記整理_簡單實(shí)現(xiàn)枚舉類型,撲克牌應(yīng)用。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09