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


Posted in Javascript onFebruary 12, 2016

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

Javascript 相关文章推荐
cloudgamer出品ImageZoom 图片放大效果
Apr 01 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
用AngularJS来实现监察表单按钮的禁用效果
Nov 02 Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
vue项目添加多页面配置的步骤详解
May 22 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
原生javascript实现自动更新的时间日期
Feb 12 #Javascript
原生javascript实现图片无缝滚动效果
Feb 12 #Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 #Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 #Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 #Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 #Javascript
浅析javascript函数表达式
Feb 10 #Javascript
You might like
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
php多进程应用场景实例详解
2019/07/22 PHP
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
jQuery中document与window以及load与ready 区别详解
2014/12/29 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
微信小程序中button组件的边框设置的实例详解
2017/09/27 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
JavaScript获取时区实现过程解析
2020/09/24 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
python通过加号运算符操作列表的方法
2015/07/28 Python
简单了解python关系(比较)运算符
2019/07/08 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
python 扩展print打印文件路径和当前时间信息的实例代码
2019/10/11 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
护理职业应聘自荐书
2013/09/29 职场文书
自荐书模板
2013/12/15 职场文书
报告会主持词
2014/04/02 职场文书
大型营销活动计划书
2014/04/28 职场文书
教师节横幅标语
2014/10/08 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
党员先进事迹材料
2014/12/19 职场文书
小学教研工作总结2015
2015/05/13 职场文书
代理词怎么写
2015/05/25 职场文书
教学反思怎么写
2016/02/24 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书