你的位置:首页 > Java教程

[Java教程]jquery实现的竖向动态柱状条效果


jquery实现的竖向动态柱状条效果:
很多数据统计效果中,柱状条方式的算是比较常见的一种,形象直观,下面就是一段能够实现此功能的代码实例,并且具有一定的动态效果,下面就对代码做一下分享,并详细介绍一下它的实现过程。
代码如下:

<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</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,那么就停止定时器函数的执行。
二.相关阅读:
1.height()函数可以参阅jQuery的height()方法一章节。
2.css()函数可以参阅jQuery的css()方法一章节。
3.setInterval()函数可以参阅setInterval()函数用法详解一章节。
4.substr()函数可以参阅JavaScript的String对象的substr()方法一章节。
5.indexOf()函数可以参阅js数组的indexOf()函数用法简单介绍一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15065

更多内容可以参阅:http://www.softwhy.com/jquery/