基于jquery实现动态竖向柱状条特效

前端技术 2023/08/31 JavaScript

本文实例介绍了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/1062

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案