复制代码 代码如下:

<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>

<div><img src="images/toubg.png" /></div>

<div id="zhong1"></div>

<div><img src="images/weibg.png" /></div>

</div>

<div>

<div><img src="images/toubg.png" /></div>

<div id="zhong2"></div>

<div><img src="images/weibg.png" /></div>

</div>

<div>

<div><img src="images/toubg.png" /></div>

<div id="zhong3"></div>

<div><img src="images/weibg.png" /></div>

</div>

<div>

<img src="images/huisebg.png" />

</div>

实现的效果是这样的，我的意思不知道大家能不能明白，其实就是先定好这个圆柱的高度，然后用JS动态的从0往上升，最好达到设定好的高度