Menyedari kesan bar lajur menegak dinamik berdasarkan jquery

Menyedari kesan bar lajur menegak dinamik berdasarkan jquery_jquery

WBOY

Lepaskan： 2016-05-16 15:15:45

asal

1076 orang telah melayarinya

Contoh dalam artikel ini memperkenalkan bar kolumnar yang dilaksanakan oleh jquery, yang sering digunakan untuk statistik data Mari kongsi kod dan perkenalkan proses pelaksanaannya secara terperinci.

Kod adalah seperti berikut:

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

Salin selepas log masuk

Kod di atas melaksanakan kesan dinamik data bar kolumnar Berikut ialah pengenalan kepada proses pelaksanaannya.
1.$(function(){}), Apabila struktur dokumen dimuatkan sepenuhnya, kod dalam kawasan bencana dilaksanakan.
2.var i=1, isytiharkan pembolehubah dan tetapkan nilai awal kepada 1. Ia akan digunakan kemudian dan tidak akan diperkenalkan di sini buat masa ini.

3.$('#top').height(8), Tetapkan ketinggian elemen atas kepada 8px.
4.$('#buttom').css('marginTop',42), Tetapkan jidar atas elemen buttom kepada 42px42+8=50, iaitu tepat ketinggian elemen bekas, supaya elemen atas boleh betul-betul Terletak di bahagian atas bekas.
5.$('#buttom').css('background','#d6d6d6'),Tetapkan warna latar belakang elemen bawah.
6.interid=setInterval(Showgao,0), Gunakan fungsi pemasa untuk terus memanggil fungsi Showgao.
7.function Showgao(){}, Jika fungsi ini tidak dilaksanakan sekali, ia akan menetapkan margin atas dan ketinggian elemen bawah dengan sewajarnya, untuk mencapai kesan elemen atas sentiasa berada pada bahagian atas dan bar kolumnar dinaikkan secara dinamik.
8.var oldH=$('#buttom').css('marginTop'), Dapatkan saiz jidar atas elemen buttom. 9.var h= oldH.substr(0,oldH.indexOf('px')), dapatkan bahagian berangka nilai saiz, seperti 28 dalam "28px".
10.$('#buttom').css('marginTop',h-1), Kurangkan saiz jidar atas sebanyak satu.
11.$('#buttom').height(i), Tetapkan ketinggian elemen buttom.
12.i++, nilai i dinaikkan sebanyak 1.
13.if(i==43){clearInterval(interid);}, Jika nilai i bersamaan dengan 43, ini bermakna nilai ketinggian buttom adalah sama dengan 42px, yang kebetulan 50px dengan ketinggian bahagian atas, kemudian hentikan Pelaksanaan fungsi pemasa.

Di atas adalah kandungan terperinci artikel ini saya harap ia akan membantu semua orang untuk mempelajari pengaturcaraan jquery.