>

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

- 编辑:正版管家婆马报彩图 -

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

正文实例介绍了jquery完结的柱状条,常用于数据总结,上边就对代码做一下享受,并详尽介绍一下它的贯彻进度。

遵照jquery完成动态竖向柱状条特效,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>

下面的代码达成柱状条数据的动态效果,上边介绍一下它的贯彻进程。
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程序设计有所扶助。

代码如下:

你或然感兴趣的作品:

  • JQUBar 基于JQUE科雷傲Y的柱状图插件
  • JQUBAPAJERO1.1 jQuery 柱状图插件宣布
  • 选取jQuery jqPlot插件绘制柱状图
  • jQuery制作简便柱状图实例
  • jQuery.Highcharts.js绘制柱状图饼状图曲线图
  • jQuery基于ajax达成拉动画成效无刷新柱状图投票代码

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

你恐怕感兴趣的篇章:

  • JQUBar 基于JQUETucsonY的柱状图插件
  • JQUBA兰德Wrangler1.1 jQuery 柱状图插件发表
  • 接纳jQuery jqPlot插件绘制柱状图
  • jQuery制作简便柱状图实例
  • jQuery.Highcharts.js绘制柱状图饼状图曲线图
  • jQuery基于ajax完成推动画功用无刷新柱状图投票代码

本文由网络计算发布,转载请注明来源:基于jquery实现动态竖向柱状条特效