快捷導(dǎo)航

基于jquery實現(xiàn)動態(tài)豎向柱狀條特效

更新時間：2016年02月12日 23:00:00 作者：愚蠢的神

很多數(shù)據(jù)統(tǒng)計效果中，柱狀條方式的算是比較常見的一種，形象直觀，下面就是一段能夠?qū)崿F(xiàn)此功能的代碼實例，并且具有一定的動態(tài)效果，感興趣的朋友可以參考一下

本文實例介紹了jquery實現(xiàn)的柱狀條，常用于數(shù)據(jù)統(tǒng)計，下面就對代碼做一下分享，并詳細(xì)介紹一下它的實現(xiàn)過程。

代碼如下:

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

上面的代碼實現(xiàn)柱狀條數(shù)據(jù)的動態(tài)效果，下面介紹一下它的實現(xiàn)過程。
1.$(function(){})，當(dāng)文檔結(jié)構(gòu)完全加載完畢災(zāi)區(qū)執(zhí)行函數(shù)中的代碼。
2.var i=1，聲明一個變量并賦初值為1，在后面會用到，這里暫時不做介紹。

3.$('#top').height(8)，設(shè)置top元素的高度為8px。
4.$('#buttom').css('marginTop',42)，設(shè)置buttom元素的上邊距為42px42+8=50恰好是容器元素的高度，這樣top元素就能夠恰好位于容器的頂端。
5.$('#buttom').css('background','#d6d6d6'),設(shè)置bottom元素的背景顏色。
6.interid=setInterval(Showgao,0)，使用定時器函數(shù)不斷調(diào)用Showgao函數(shù)。
7.function Showgao(){}，此函數(shù)沒執(zhí)行一次，都會相應(yīng)的設(shè)置一次bottom元素的上外邊距和高度，從而達(dá)到，top元素始終位于頂部和柱狀條動態(tài)增加的效果。
8.var oldH=$('#buttom').css('marginTop')，獲取buttom元素的上外邊距的尺寸。9.var h= oldH.substr(0,oldH.indexOf('px'))，獲取尺寸值的數(shù)字部分，比如"28px"中的28。
10.$('#buttom').css('marginTop',h-1)，將上外邊距的尺寸減一。
11.$('#buttom').height(i)，設(shè)置buttom元素的高度。
12.i++，i的值加1。
13.if(i==43){clearInterval(interid);}，如果i的值等于43，說明buttom的高度值等于42px，恰好和top的高度和為50px，那么就停止定時器函數(shù)的執(zhí)行。