jquery實現的豎向動態柱狀條效果:很多數據統計效果中，柱狀條方式的算是比較常見的一種，形象直觀，下麵就是一段能夠實現此功能的代碼實例，並且具有一定的動態效果，下麵就對代碼做一下分享，並詳細介紹一下它的實現過程。代碼如下: <!DOCTYPE html> <html> <head> <meta c
jquery實現的豎向動態柱狀條效果:
很多數據統計效果中，柱狀條方式的算是比較常見的一種，形象直觀，下麵就是一段能夠實現此功能的代碼實例，並且具有一定的動態效果，下麵就對代碼做一下分享，並詳細介紹一下它的實現過程。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</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，那麼就停止定時器函數的執行。
二.相關閱讀:
1.height()函數可以參閱jQuery的height()方法一章節。
2.css()函數可以參閱jQuery的css()方法一章節。
3.setInterval()函數可以參閱setInterval()函數用法詳解一章節。
4.substr()函數可以參閱JavaScript的String對象的substr()方法一章節。
5.indexOf()函數可以參閱js數組的indexOf()函數用法簡單介紹一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15065
更多內容可以參閱:http://www.softwhy.com/jquery/
