D7c search7 D7c searchas
as Javascriptcreateelement a Javascriptcreateelement c Javascriptcreateelement GIF图标 | 广告代码 | 模板 网页特效 | 链接 | 菜单 | 背景 | 日期 平面设计 | Photoshop | 建站素材 | PSD素材 热门资讯
D7c search7 D7c searchasas Javascriptcreateelement a Javascriptcreateelement c Javascriptcreateelement GIF图标 | 广告代码 | 模板 网页特效 | 链接 | 菜单 | 背景 | 日期 平面设计 | Photoshop | 建站素材 | PSD素材 热门资讯
下面纯js实现css柱状图，这个效果是一个百分比示意条,它可以定义三种颜色,当百分比小于33%的时候显示红色,表示警告,适中的时候显示黄色,表示适中,大于67%的时候显示绿色表示通畅
而且可以动态改变百分比数值,数值改变时,百分比条是用动画方式表现的,
如下图所示:
给出这个实现的代码：
css:
1 .percent{} 7 .inner{}
js代码：
1 var PercentBar=function(){} 4 PercentBar.prototype={} 24 mixin(this.options,config); 25 this.createHtml(); 26 }, 27 createHtml:function(){}, 53 update:function(num){}},1); 55 ani.onTween.subscribe(function(s, o,handle) {}else if(num>num2&&num<=num2*2){}else{} 71 handle.text_ele.innerHTML=text; 72 handle.inner_ele.style.backgroundColor=color; 73 },this) 74 ani.animate(); 75 } 76 }
这个效果原理就是动态改变里面那个层的宽度,原理很简单,代码使用了yui。
在线效果演示：ajax-weibo.html