基于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 相关文章推荐
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
javascript实现类似百度分享功能的方法
Jul 27 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
js实现无缝轮播图插件封装
Jul 31 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 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中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
php 使用ActiveMQ发送消息,与处理消息操作示例
2020/02/23 PHP
jQuery 技巧小结
2010/04/02 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
python SVM 线性分类模型的实现
2019/07/19 Python
python Canny边缘检测算法的实现
2020/04/24 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
商务会议邀请函
2014/01/09 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
临时用工协议书范本
2014/10/29 职场文书
铣工实训报告
2014/11/05 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
Python自动化之批量处理工作簿和工作表
2021/06/03 Python