JS中for循序中延遲加載動態(tài)效果的具體實現
更新時間：2013年08月18日 16:28:26 作者：
今天在做一個前端的效果的時候碰到一個棘手的問題，就是實現一個動態(tài)的圓柱效果，廢話不多少，直接上代碼
復制代碼 代碼如下:
<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); //設置OldHeight屬性
}
var e=0; //定義一個值
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代碼
復制代碼 代碼如下:
<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>
實現的效果是這樣的，我的意思不知道大家能不能明白，其實就是先定好這個圓柱的高度，然后用JS動態(tài)的從0往上升，最好達到設定好的高度
相關文章
淺談JavaScript中setInterval和setTimeout的使用問題
這篇文章主要介紹了淺談JavaScript中setInterval和setTimeout的使用問題,作者建議在任務龐大時盡量避免使用setInterval,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JavaScript中的Math.LN2屬性用法詳解,是JS入門學習中的基礎知識,需要的朋友可以參考下2015-06-06
javascript下for循環(huán)用法小結...2007-07-07
document.getElementById獲取控件對象為空的解決方法
今天寫個網頁，想在頁面加載onLoad時，動態(tài)顯示由后臺其他程序傳來的數據時，用document.getElementById獲取控件對象總是為空。但是檢查了這個id確實是存在的?？聪挛牡氖纠徒鉀Q方法2013-11-11
如何使用mailto？對于大多數人來說并不是很陌生，但是實用上的細節(jié)部分你們有沒有注意到，接下來分享一下本人在使用過程中的經驗，需要了解的朋友可以參考下2012-12-12
本文詳細介紹了javascript中的相等符號以及嚴格相等符號,需要的朋友可以參考下2014-11-11
完美解決JS中漢字顯示亂碼問題（已解決）...2006-12-12
Javascript 動態(tài)改變imput type屬性
這篇文章主要介紹了Javascript 動態(tài)改變imput type屬性的相關資料,并附簡單實例代碼，需要的朋友可以參考下2016-11-11
Js中sort()方法的用法，需要的朋友可以參考下。2006-11-11
JavaScript學習筆記整理_簡單實現枚舉類型,撲克牌應用
下面小編就為大家?guī)硪黄狫avaScript學習筆記整理_簡單實現枚舉類型,撲克牌應用。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09