基于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 相关文章推荐
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
JavaScript验证电子邮箱的函数
Aug 22 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 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
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
javascript date格式化示例
2013/09/25 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
浅谈Node.js之异步流控制
2017/10/25 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
[48:41]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python 关于反射和类的特殊成员方法
2017/09/14 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
Python中判断输入是否为数字的实现代码
2018/05/26 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
python中嵌套函数的实操步骤
2019/02/27 Python
Python如何基于Tesseract实现识别文字功能
2020/06/05 Python
通俗讲解python 装饰器
2020/09/07 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
Yahoo-PHP面试题3
2012/01/14 面试题
《三袋麦子》教学反思
2014/03/02 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
汽车转让协议书
2015/01/29 职场文书