基于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程序设计有所帮助。
相关文章
本篇文章主要是对SinaEditor使用方法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了jQuery实现每隔几条元素增加1条线的方法,可实现每隔10条li元素增加一条虚线的功能,涉及jQuery元素的匹配与属性动态设置技巧,需要的朋友可以参考下2016-06-06
相信大家都见过或使用过放大镜效果，甚至实现过该效果，它一般应用于放大查看商品图片，一些电商网站（例如：凡客，京东商城，阿里巴巴等）都有类似的图片查看效果。那么接下来，我们将向大家介绍通过jQuery实现放大镜效果。2014-09-09
在次封装easyui-Dialog插件实现代码，需要的朋友可以参考下。2010-11-11
今天小编就为大家分享一篇JQuery通过后台获取数据遍历到前台的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
选择用户是一个比较常用的功能，主要包含2个功能点（保存已选选项、显示已选用户）2014-07-07
这篇文章主要介绍了jQuery实现仿腾讯迷你首页选项卡效果代码,可实现tab切换按钮的左右滑动显示及点击切换效果,涉及jQuery基于鼠标事件实现页面元素动态操作技巧,需要的朋友可以参考下2015-09-09
jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果，带索引按钮控制和左右按钮控制图片切换，实例代码如下，感兴趣的朋友可以参考下哈2013-06-06
本篇文章小编将为大家介绍，使用PHP+JQuery+Ajax分页的实现。需要的朋友参考下2013-04-04
jQuery 对Select的操作备忘记录，整理的比较全，并且附有详细的说明。2011-07-07
最新评论