基于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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery基于ajax实现带动画效果无刷新柱状图投票代码

    jQuery基于ajax实现带动画效果无刷新柱状图投票代码

    本文实例讲述了jQuery基于ajax实现带动画效果无刷新柱状图投票代码.分享给大家供大家参考.具体如下: 这里介绍的jQuery ajax投票特效,带动画效果 类似进度条风格的柱状图,以你最喜欢的编程语言是哪一种为例来演示投票效果,以Ajax方式无刷新投票,每点击一次,横向的柱状图就会增长一节.如果在火狐或chrome下浏览,那些柱状图横条是圆角的,在IE8下则无此效果. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head>

  • jQuery.Highcharts.js绘制柱状图饼状图曲线图

    在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. 复制代码 代码如下: var chart;             $(document).ready(function() {                 chart = new Highcharts.Chart({                     c

  • JQUBar 基于JQUERY的柱状图插件

    JQUBar 基于JQUERY的柱状图插件

    一.JQUBAR(V1.0)JQUERY插件简介 1.支持.net.java.php等平台. 2.用户可以通过鼠标拖拽柱状图从而改变每根柱子的高度,最终达到通过鼠标拖拽图形界面来修改服务器数据的目的. 3.支持柱状图缩放. 4.目前支持浏览器:IE7. IE8. Firefox.Chrome. 二.HTML 复制代码 代码如下: <div id="con"><%--JQUBAR容器--%> </div> <input type="ch

  • jQuery制作简单柱状图实例

    本文实例讲述了jQuery制作简单柱状图的方法.分享给大家供大家参考.具体实现方法如下: Html部分: 复制代码 代码如下: <head>  <title>柱状图</title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <link href="css.css" type="tex

  • 使用jQuery jqPlot插件绘制柱状图

    使用jQuery jqPlot插件绘制柱状图

    在一个项目研发过程中,需要显示账户的资金情况,为了给客户良好的体验我们采用了柱状图形展现,绘图的过程如果使用原生态脚本绘制这样比较麻烦,时间也会比较长,所以我们选择了jqPlot插件进行绘制,这样可以节省大量的时间,也能很快就能展示给用户. 插件官方地址:http://www.jqplot.com/ 具体实现如下: 引用JS文件: 复制代码 代码如下: <link href="~/Scripts/asset/jqplot/jquery.jqplot.min.css" rel=&q

  • JQUBAR1.1 jQuery 柱状图插件发布

    JQUBAR1.1 jQuery 柱状图插件发布

    1.1版本修复了部分bug,同时新增以下功能: 1.可自定义坐标颜色 2.可自定义X,Y轴坐标名称 3.Y轴动态坐标自动建立 4.Y轴动态坐标值自动计算 5.插件样式升级 JQUBAR1.1使用方法: 1.引入Javascript文件及CSS文件: (在html<head></head>加入以下代码,以ASP.NET MVC 2.0 为例) 复制代码 代码如下: <script src="<%=Url.Content("~/Scripts/jquer

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

    本文实例介绍了jquery实现的柱状条,常用于数据统计,下面就对代码做一下分享,并详细介绍一下它的实现过程. 代码如下: <html> <head> <meta charset="gb2312"> <title>jquery柱状条</title> <style type="text/css"> .container{ width:20px; height:50px; border:1px sol

  • 基于jQuery Bar Indicator 插件实现进度条展示效果

    基于jQuery Bar Indicator 插件实现进度条展示效果

    Bar Indicator是一款基于jQuery的进度条数据展示插件,它可应用于数据统计展示.投票统计以及任务进度等诸多场景中.它使用简单.选项丰富,几乎可以满足用户所有基于进度条的WEB设计需求,本文将结合实例给大家讲解Bar Indicator的使用. 查看演示 下载源码 HTML 首先加载jQuery和Bar Indicator相关js文件以及css文件. <link href="bi-style.css" rel="stylesheet" />

  • 一款基于jQuery的图片场景标注提示弹窗特效

    一款基于jQuery的图片场景标注提示弹窗特效

    今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗,不支持IE8及以下浏览器.效果非常不错.效果如下: 实现的过程. 这款实例要引用jquery和jquery ui库,还有一个实现的main.js库.需上的朋友可以点击上现的下载按钮下载来看看. html代码部分: 复制代码 代码如下: <div class="container"

  • 基于jQuery排序及应用实现Tab栏特效

    基于jQuery排序及应用实现Tab栏特效

    目录 一.jQuery排序 二.index()方法 三.应用:Tab栏特效中的排他 一.jQuery排序 eq()排序,可以看作是一个筛选方法 jQuery 中获得的对象,内部包含选择的一组原生 js 对象,在 jQuery 对象中会进行一个新的大的排序,这个排序与原来的 HTML 结构没有关系. 所以eq() 方法在 jQuery 对象中通过下标获取某个对象,下标是 jQuery 对象中的大的排序的下标. //选中所有p标签 var $ps = $("p"); //生成了一个jque

  • 基于jQuery实现动态搜索显示功能

    基于jQuery实现动态搜索显示功能

    本文实例使用jQuery实现动态搜索显示功能,只要输入值就能立刻动态显示数据,不同于常规查询方法,供大家参考,具体内容如下 模拟效果如下: 情况1: 情况2: 实现代码: <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> &l

  • 基于jQuery实现动态数字展示效果

    我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据.本文将结合实例给大家介绍使用jQuery实现动态数字展示效果. 查看演示 下载源码 HTML代码 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: <div class="count">当前在线:<span id="number"> &

  • 基于jfreechart生成曲线、柱状等图片并展示到JSP

    虽然现在JS做报表和图形展示已经非常普遍和漂亮了,但是不能忽略有jfreechart 这样一种东西! 这些翻阅资料,在看以前写的示例时发现了关于jfreechart 的简单示例,不管怎样发上来分享一下! 这个示例使用JSP和Servlet做后台和前台展示,下面有源代码可以直接运行! 生产线型趋势图: package com.xidian.servlet; import java.awt.Color; import java.awt.Font; import java.io.*; import j

  • 基于jQuery Tipso插件实现消息提示框特效

    基于jQuery Tipso插件实现消息提示框特效

    基于jQuery Tipso插件实现消息提示框的特点是可以定义提示框的显示位置,以及动态改变提示框的提示内容,应该说是一款相当灵活的jQuery消息提示框插件,分享给大家供大家参考,具体内容如下 在线演示 源码下载 实现的代码: <div class="dowebok"> <h2> 1.默认</h2> <div class="inner"> <span id="tip1" data-tipso

  • jQuery实现文件上传进度条特效

    jQuery实现文件上传进度条特效

    上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下. 最近呢,一个项目做一个进度条的效果出来,这个之前还真没做过.刚好这周没什么东西了,就拿这个来充一下数吧. 文件上传,得先准备一个"按钮": 这个看上去还是不错的吧,实现也是很简单的: <span class="upload-span">开始上传文件</span> <button>太

  • 基于jQuery实现的文字按钮表单特效整理

    基于jQuery实现的文字按钮表单特效整理

    1.jQuery幻灯片按钮控制图片过渡特效 基于jQuery实现的幻灯片按钮控制图片过渡特效源码,共有4幅图片进行自动切换,且切换时有幻灯片过度的效果.用户还可自定义幻灯片的标题文字和内容.是一款非常优秀的特效源码. 在线演示 源码下载 2.htm5+CSS3实现的表单美化带输入验证特效 纯html5+css3实现的表单美化效果,以及具有输入验证特效的代码,此种特效在网站非常实用. 在线演示 源码下载 3.jquery制作的带有遮罩弹出层实现登录注册等表单 实现了点击后在原始页面上弹出想用页面的

随机推荐