前端常用效果（3）带动画的比较型柱状图

先上效果, 代码引用了jquery的框架
复制代码

在项目中我们经常会遇到需要用图的形式展示数据，数据不是很多，用插件感觉没必要，而且有时候我们需要一些自定义的功能来展示，而这些功能可能是插件没有的，这时候就需要自己写这种比较的展示图了，下面是代码：

html代码如下

<div class="show-content">                           <!--最后显示的效果是num数值占总数的百分比为宽度--><div><div num='45' class="show">                  <!--num为自定义的属性，值就是需要展示的数据--></div></div><div><div num='30' class="show"></div></div><div><div num='60' class="show"></div></div>
</div>
复制代码

css代码如下

.show-content{width:200px;                                                //设置初始宽度margin:0 auto;
}
.show-content>div{height: 10px;margin-top: 10px;
}
.show{width: 200px;                                               //默认宽度为满background: #3f80f5;height: 10px;float: right;
}
复制代码

js代码如下

showProgress('show', 200);                               //代码调用，200是动画的时间function showProgress(name, width, time) {if(!width) width = 75;if(!time) time = 1500;var nums = new Array();$("div." + name).each(function() {nums.push(parseInt($(this).attr('num')));});var max = Math.max.apply(this, nums);             //计算出数据中的最大值var w = 1;$("div." + name).each(function() {                              //循环计算新的宽度，并执行animate动画，也可以用css3写，考虑到兼容ie8，我这就用js动画写了if(max > 0)w = width * parseInt($(this).attr('num')) / max;$(this).animate({'width': w}, time);});
}
复制代码

在线地址

在线地址
这个效果这项目数据展示中用的多，适用于数据较少，又需要自定义添加一些功能的时候，当数据较多时，建议使用图表插件制作。

前端常用效果（3）带动画的比较型柱状图相关推荐

html怎么帮图片占位,css+html实现Skeleton Screen 加载占位图动画效果（带动画）
效果自上而下渐隐渐现源码 html,用的angular语法,只要做简单的修改就可以成为你需要的语法 css .skeletonItem { padding: 16px; border-bottom ...
前端常用效果（2）带效果的tab切换
先上效果, 代码引用了jquery的框架复制代码功能实现比较简单,代码如下所示: html代码如下 <div class='tabchouse'>  ...
swal 弹框确定ajax,前端常用效果（layer/swal）
1.等待状态 layer.load(1, { shade : [ 0.6, '#000' ] },function(){ }); 2.确认confirm框 layer.confirm('您确认从购物车 ...
网站建设中前端常用的jQuery+easing缓动的动画
网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...
css3+jQuery制作导航菜单（带动画效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css ...
（带动画效果）卷积神经网络的讲解.pptx
这学期我上的另一门课是本科生的<深度学习>,主要用的是吴恩达老师的<深度学习>视频课的内容. 使用教材:吴恩达<深度学习>课程笔记课外参考书:<深度学习&g ...
Unity3d中使用自带动画系统制作下雨效果(一)
之前看了以前版本的unity3d demo AngryBots ,觉得里面的下雨效果不错,刚好前段时间学习了,写出来跟大家分享下,直接开始. 使用自带动画系统制作下雨效果. 先制作下雨的雨滴涟漪. 步 ...
我的Android进阶之旅------Android利用温度传感器实现带动画效果的电子温度计
要想实现带动画效果的电子温度计,需要以下几个知识点: 1.温度传感器相关知识. 2.ScaleAnimation动画相关知识,来进行水印刻度的缩放效果. 3.android:layout_weight ...
vue伸缩效果_Vue2(三)实现子菜单展开收缩，带动画效果实现方法
以前做这种操作就是简单的display:block,但现在用户的要求也越来越高,需要美观和动画感. 现在介绍用一种简单的方式来实现子菜单从上向下展开子菜单. 看下效果图: 点开效果: 其实原理比较简单 ...

前端常用效果（3）带动画的比较型柱状图

html代码如下

css代码如下

js代码如下

在线地址

前端常用效果（3）带动画的比较型柱状图相关推荐

最新文章

热门文章