jquery實現的豎向動態柱狀條效果

antzone發表於2017-03-22
jQuery

很多資料統計效果中，柱狀條方式的算是比較常見的一種，形象直觀，下面就是一段能夠實現此功能的程式碼例項，並且具有一定的動態效果，下面就對程式碼做一下分享，並詳細介紹一下它的實現過程。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!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 substr()一章節。

5.indexOf()函式可以參閱js 陣列 indexOf()一章節。

相關文章