基於jquery實現動態垂直柱狀條特效_jquery
- WBOY原創
- 2016-05-16 15:15:451079瀏覽
本文實例介紹了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程式設計有所幫助。