Posted in Javascript onAugust 18, 2013
<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动态的从0往上升,最好达到设定好的高度
JS中for循序中延迟加载动态效果的具体实现
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@