基于jquery实现动态竖向柱状条特效

本文实例介绍了jquery实现的柱状条，常用于数据统计，下面就对代码做一下分享，并详细介绍一下它的实现过程。
代码如下:

<html> <head> <meta charset="gb2312"> <title>jquery柱状条</title> <style type="text/css">.container{ width:20px; height:50px; border:1px solid #999; font-size:10px; float:left; margin-left:5px;}</style><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script type="text/javascript">$（function（）{ var i=1; $（"#top"）.height（8）; $（"#buttom"）.css（"marginTop",42）; $（"#buttom"）.css（"background","#d6d6d6"）;interid=setInterval（Showgao,0）; function Showgao（）{var oldH=$（"#buttom"）.css（"marginTop"）;var h= oldH.substr（0,oldH.indexOf（"px"））;$（"#buttom"）.css（"marginTop",h-1）;$（"#buttom"）.height（i）;i++;if（i==43）{clearInterval（interid）;} }var i1=1; $（"#top1"）.height（4）; $（"#buttom1"）.css（"marginTop",46）; $（"#buttom1"）.css（"background","red"）; interid1=setInterval（Showgao1,1）; function Showgao1（）{var oldH=$（"#buttom1"）.css（"marginTop"）;var h= oldH.substr（0,oldH.indexOf（"px"））;$（"#buttom1"）.css（"marginTop",h-1）;$（"#buttom1"）.height（i1）;i1++;if（i1==30）{clearInterval（interid1）;} }}）;</script></head><body><div class="container"> <div id="top">82%</div> <div id="buttom"></div></div><div class="container"> <div id="top1" >62%</div> <div id="buttom1"></div></div></body></html>

上面的代码实现柱状条数据的动态效果，下面介绍一下它的实现过程。
1.$（function（）{}），当文档结构完全加载完毕灾区执行函数中的代码。
2.var i=1，声明一个变量并赋初值为1，在后面会用到，这里暂时不做介绍。
3.$（"#top"）.height（8），设置top元素的高度为8px。
4.$（"#buttom"）.css（"marginTop",42），设置buttom元素的上边距为42px42+8=50恰好是容器元素的高度，这样top元素就能够恰好位于容器的顶端。
5.$（"#buttom"）.css（"background","#d6d6d6"）,设置bottom元素的背景颜色。
6.interid=setInterval（Showgao,0），使用定时器函数不断调用Showgao函数。
7.function Showgao（）{}，此函数没执行一次，都会相应的设置一次bottom元素的上外边距和高度，从而达到，top元素始终位于顶部和柱状条动态增加的效果。
8.var oldH=$（"#buttom"）.css（"marginTop"），获取buttom元素的上外边距的尺寸。9.var h= oldH.substr（0,oldH.indexOf（"px"）），获取尺寸值的数字部分，比如"28px"中的28。
10.$（"#buttom"）.css（"marginTop",h-1），将上外边距的尺寸减一。
11.$（"#buttom"）.height（i），设置buttom元素的高度。
12.i++，i的值加1。
13.if（i==43）{clearInterval（interid）;}，如果i的值等于43，说明buttom的高度值等于42px，恰好和top的高度和为50px，那么就停止定时器函数的执行。
以上就是本文的详细内容，希望对大家学习jquery程序设计有所帮助。