jQuery实现动态高度延迟加载效果

<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!="")\n {
if(e>b){$("#zhong"+x+"").height(b);}\n else{$("#zhong"+x+"").height(e);}\n }\n }\n if(e==1000){clearInterval(interid);}\n }\n\n });\n</script>

HTML结构示例

接下来查看对应的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>

效果说明与原理

最终呈现的效果如所示。其核心逻辑在于预先确定圆柱体的目标高度，随后通过JavaScript脚本控制其高度值从0开始逐步增加，直至达到预设的高度值，从而实现动态加载的视觉效果。