Heim > Artikel > Web-Frontend > Realisieren dynamischer vertikaler Spaltenbalkeneffekte basierend auf jquery_jquery

Realisieren dynamischer vertikaler Spaltenbalkeneffekte basierend auf jquery_jquery

WBOYOriginal: 2016-05-16 15:15:451004Durchsuche

Das Beispiel in diesem Artikel stellt die von jquery implementierte Spaltenleiste vor, die häufig für Datenstatistiken verwendet wird. Lassen Sie uns den Code teilen und seinen Implementierungsprozess im Detail vorstellen.

Der Code lautet wie folgt:

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

Der obige Code implementiert den dynamischen Effekt von Spaltenbalkendaten. Im Folgenden finden Sie eine Einführung in den Implementierungsprozess.
1.$(function(){}), Wenn die Dokumentstruktur vollständig geladen ist, wird der Code im Katastrophenbereich ausgeführt.
2.var i=1, deklariert eine Variable und weist den Anfangswert 1 zu. Er wird später verwendet und hier nicht vorgestellt.

3.$('#top').height(8), Setzen Sie die Höhe des oberen Elements auf 8px.
4.$('#buttom').css('marginTop',42), Setzen Sie den oberen Rand des Buttom-Elements auf 42px42 8=50, was genau der Höhe des Containerelements entspricht Das obere Element kann genau auf der Oberseite des Behälters platziert werden.
5.$('#buttom').css('background','#d6d6d6'),Legen Sie die Hintergrundfarbe des unteren Elements fest.
6.interid=setInterval(Showgao,0), Verwenden Sie die Timer-Funktion, um die Showgao-Funktion kontinuierlich aufzurufen.
7.Funktion Showgao(){}, Wenn diese Funktion nicht einmal ausgeführt wird, werden der obere Rand und die Höhe des unteren Elements entsprechend eingestellt, um den Effekt zu erzielen, dass sich das obere Element immer an der Stelle befindet Die Oberseite und die Säulenleiste werden dynamisch vergrößert.
8.var oldH=$('#buttom').css('marginTop'), Ermitteln Sie die Größe des oberen Randes des unteren Elements. 9.var h= oldH.substr(0,oldH.indexOf('px')), den numerischen Teil des Größenwerts abrufen, z. B. 28 in "28px".
10.$('#buttom').css('marginTop',h-1), Reduzieren Sie die Größe des oberen Randes um eins.
11.$('#buttom').height(i), Legen Sie die Höhe des unteren Elements fest.
12.i, der Wert von i wird um 1 erhöht.
13.if(i==43){clearInterval(interid);}, Wenn der Wert von i gleich 43 ist, bedeutet dies, dass der Höhenwert von buttom gleich 42px ist, was zufällig der Fall ist 50px mit der Höhe von oben, dann stoppt die Ausführung der Timer-Funktion.

Das Obige ist der detaillierte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein, die JQuery-Programmierung zu erlernen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Merkmale assoziativer Prototypkettenattribute in JavaScript_Javascript-KenntnissenNächster Artikel：Merkmale assoziativer Prototypkettenattribute in JavaScript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen