ホームページ > 記事 > ウェブフロントエンド > jquery_jquery に基づいた動的な垂直列バー効果の実現
jquery_jquery に基づいた動的な垂直列バー効果の実現
- WBOYオリジナル
- 2016-05-16 15:15:451005ブラウズ
この記事の例では、データ統計によく使用される 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), 一番上の要素の高さを 8px に設定します。
4.$('#buttom').css('marginTop',42), 一番下の要素の上マージンを 42px42+8=50 に設定します。これはコンテナ要素の高さと同じです。これにより、最上位の要素がコンテナの最上部に正確に配置されるようになります。
5.$('#buttom').css('background','#d6d6d6'),一番下の要素の背景色を設定します。
6.interid=setInterval(Showgao,0), タイマー関数を使用して、Showgao 関数を連続的に呼び出します。
7.function Showgao(){}, この関数が一度実行されない場合、上部要素が常にその位置にあるような効果を得るために、下部要素の上マージンと高さがそれに応じて設定されます。上部と柱状のバーが動的に増加します。
8.var oldH=$('#buttom').css('marginTop'), 一番下の要素の上マージンのサイズを取得します。 9.var h= oldH.substr(0,oldH.indexOf('px'))、「28px」の 28 など、サイズ値の数値部分を取得します。
10.$('#buttom').css('marginTop',h-1), 上マージンのサイズを 1 つ減らします。
11.$('#buttom').height(i), 一番下の要素の高さを設定します。
12.i++、i の値が 1 増加します。
13.if(i==43){clearInterval(interid);}, i の値が 43 に等しい場合、底部の高さの値が 42px に等しいことを意味します。上部の高さを50pxにしてタイマー機能の実行を停止します。
以上がこの記事の詳細な内容であり、皆さんがjqueryプログラミングを学ぶのに役立つことを願っています。