Maison > Article > interface Web > Réalisation d'effets de barre de colonnes verticales dynamiques basés sur jquery_jquery

Réalisation d'effets de barre de colonnes verticales dynamiques basés sur jquery_jquery

WBOYoriginal: 2016-05-16 15:15:451005parcourir

L'exemple de cet article présente la barre de colonnes implémentée par jquery, qui est souvent utilisée pour les statistiques de données. Partageons le code et présentons son processus d'implémentation en détail.

Le code est le suivant :

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

Le code ci-dessus implémente l'effet dynamique des données des barres de colonnes. Ce qui suit est une introduction à son processus d'implémentation.
1.$(function(){}), Lorsque la structure du document est complètement chargée, le code dans la zone sinistrée est exécuté.
2.var i=1, déclare une variable et attribue la valeur initiale à 1. Elle sera utilisée plus tard et ne sera pas introduite ici pour le moment.

3.$('#top').height(8), Définissez la hauteur de l'élément supérieur sur 8px.
4.$('#buttom').css('marginTop',42), Définissez la marge supérieure de l'élément bouton sur 42px42+8=50, qui est exactement la hauteur de l'élément conteneur, afin que l'élément supérieur puisse être exactement situé en haut du conteneur.
5.$('#buttom').css('background','#d6d6d6'),Définissez la couleur d'arrière-plan de l'élément inférieur.
6.interid=setInterval(Showgao,0), Utilisez la fonction timer pour appeler en continu la fonction Showgao.
7.function Showgao(){}, Si cette fonction n'est pas exécutée une seule fois, elle définira la marge supérieure et la hauteur de l'élément inférieur en conséquence, de manière à obtenir l'effet que l'élément supérieur est toujours à le haut et la barre en colonnes sont augmentés de manière dynamique.
8.var oldH=$('#buttom').css('marginTop'), Obtenir la taille de la marge supérieure de l'élément bouton. 9.var h= oldH.substr(0,oldH.indexOf('px')), récupère la partie numérique de la valeur de taille, telle que 28 dans "28px".
10.$('#buttom').css('marginTop',h-1), Réduisez la taille de la marge supérieure de un.
11.$('#buttom').height(i), Définissez la hauteur de l'élément du bouton.
12.i++, la valeur de i est augmentée de 1.
13.if(i==43){clearInterval(interid);}, Si la valeur de i est égale à 43, cela signifie que la valeur de la hauteur du bouton est égale à 42px, ce qui se trouve être 50px avec la hauteur du haut, puis arrêtez l'exécution de la fonction timer.

Ce qui précède est le contenu détaillé de cet article. J'espère qu'il sera utile à tout le monde d'apprendre la programmation jquery.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Caractéristiques des attributs de chaîne de prototype associatif dans les compétences JavaScript_javascriptArticle suivant：Caractéristiques des attributs de chaîne de prototype associatif dans les compétences JavaScript_javascript

Articles Liés

Voir plus