基于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阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
Mar 31 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
在vue中使用eslint,配合vscode的操作
Nov 09 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中定时计划任务的实现原理
2013/01/08 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
自己写的php curl库实现整站克隆功能
2015/02/12 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
JS request函数 用来获取url参数
2010/05/17 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
python的re模块应用实例
2014/09/26 Python
Python import用法以及与from...import的区别
2015/05/28 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
女大学生个人求职信
2013/12/09 职场文书
2014信息公开实施方案
2014/02/22 职场文书
音乐教育感言
2014/03/05 职场文书
工程力学专业自荐信范文
2014/03/17 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python