前端常用效果（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);
	});
}
复制代码

在线地址

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