当前位置：首页 > 资讯 > 技术文档

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

时间：2020-06-14 03:11 编辑：来源：阅读：
扫一扫，手机访问

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

本文实例介绍了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>

上面的代码实现柱状条数据的动态效果，下面介绍一下它的实现过程。 [b]1.$(function(){})，[/b]当文档结构完全加载完毕灾区执行函数中的代码。 [b]2.var i=1，[/b]声明一个变量并赋初值为1，在后面会用到，这里暂时不做介绍。 [b]3.$('#top').height(8)，[/b]设置top元素的高度为8px。 [b]4.$('#buttom').css('marginTop',42)，[/b]设置buttom元素的上边距为42px42+8=50恰好是容器元素的高度，这样top元素就能够恰好位于容器的顶端。 [b]5.$('#buttom').css('background','#d6d6d6'),[/b]设置bottom元素的背景颜色。 [b]6.interid=setInterval(Showgao,0)，[/b]使用定时器函数不断调用Showgao函数。 [b]7.function Showgao(){}，[/b]此函数没执行一次，都会相应的设置一次bottom元素的上外边距和高度，从而达到，top元素始终位于顶部和柱状条动态增加的效果。 [b]8.var oldH=$('#buttom').css('marginTop')，[/b]获取buttom元素的上外边距的尺寸。9.var h= oldH.substr(0,oldH.indexOf('px'))，获取尺寸值的数字部分，比如"28px"中的28。 [b]10.$('#buttom').css('marginTop',h-1)，[/b]将上外边距的尺寸减一。 [b]11.$('#buttom').height(i)，[/b]设置buttom元素的高度。 [b]12.i++，[/b]i的值加1。 [b]13.if(i==43){clearInterval(interid);}，[/b]如果i的值等于43，说明buttom的高度值等于42px，恰好和top的高度和为50px，那么就停止定时器函数的执行。以上就是本文的详细内容，希望对大家学习jquery程序设计有所帮助。

全部评论(0)

上一篇：JavaScript中String.match()方法的使用详解
下一篇：jquery实现手机号码选号的方法

资讯排行榜
更多>>