css3圆形百分比进度条的实现原理

itjc8

css3圆形百分比进度条的实现原理

今天早上起来在查看jquery插件机制的时候，一不小心点进了css3圆形百分比进度条的相关文章，于是一发不可收拾，开始折腾了。。。

关于圆形圈的实现，想必用2个圆心相同，半径不同的div即可实现。大圆的颜色即为圆形进度条的底色，小圆的颜色即为中间百分比的遮罩颜色白色， 还要加上左右2边一边一个半圆，也就是说总共应该有4个div，一个大圆的div中包含3个div，左右一边半个圆，遮罩div处于最上面。

那这里的一边半个圆怎么实现呢？使用css的clip属性即可切图一样的只显示一半，这里稍后详细介绍。

这种实现效果其实是可以的（当百分比不超过50%的时候），当超过以后，就会发现，比如是60%，但进度条显示的是40%，这是为什么呢？因为左 右旋转的div没有遮住的缘故，超过了各自所在的范围应该hidden才行，不然多余的部分同样会显示出来。如图所示，当40%的时候正常，当60%的时 候是一样的，

那我们是不是还需要额外的2个div，来起到遮盖的作用，来看html代码

1. <div>
   
2. <div><div></div></div>
   
3. <div><div></div></div>
   
4. <div><span>10</span>%</div>
   
5. </div>

复制代码

样式：

1. .circle {
   
2. width: 200px;
   
3. height: 200px;
   
4. position: absolute;
   
5. border-radius: 50%;
   
6. background: #0cc;
   
7. }
   
8. 
   
9. .left,.right{
   
10. width:200px;
    
11. height:200px;
    
12. position: absolute;
    
13. top: 0px;left: 0px;
    
14. }
    
15. .pie_left, .pie_right{
    
16. width:200px;
    
17. height:200px;
    
18. position: absolute;
    
19. border-radius: 50%;
    
20. top: 0px;left: 0px;
    
21. background: red;
    
22. }
    
23. 
    
24. .pie_right,.right {
    
25. clip:rect(0,auto,auto,100px);
    
26. }
    
27. .pie_left , .left{
    
28. clip:rect(0,100px,auto,0);
    
29. }
    
30. 
    
31. /*
    
32. *当top和left取值为auto时，相当于0
    
33. *当bottom和right取值为auto时，相当于100%
    
34. */
    
35. .mask {
    
36. width: 150px;
    
37. height: 150px;
    
38. border-radius: 50%;
    
39. left: 25px;
    
40. top: 25px;
    
41. /*background: #FFF;*/
    
42. position: absolute;
    
43. text-align: center;
    
44. line-height: 150px;
    
45. font-size: 16px;
    
46. }

复制代码

这里js代码就比较简单了，只需要稍微做一下判断：

1. $(function(){
   
2. if( $('.mask span').text() <= 50 ){
   
3. $('.pie_right').css('transform','rotate('+($('.mask span').text()*3.6)+'deg)');
   
4. }else{
   
5. $('.pie_right').css('transform','rotate(180deg)');
   
6. $('.pie_left').css('transform','rotate('+(($('.mask span').text()-50)*3.6)+'deg)');
   
7. }
   
8. })

复制代码

说明：因为100%对应的是360度，那么50%对应的就是180度，1/3.6度。
再来介绍Clip属性

clip我们常用的就是rect()了，clip的兼容性也还可以，在兼容基本浏览器。

clip用法

对于一个属性设置为position:absolute;或者position:fixed;的元素设置才有作用。

clip:rect(top,right,bottom,left);

在IE6`7中，把属性之间的逗号去掉即可。

这里的right和bottom值都是相对于left和top的，包含在选中区域内的像素，就会显示出来，其它的都会隐藏。

那要是万一，bottom小于top，right小于left呢？那就整张图片就隐藏了。

还有需要注意的是，

• 当left和top取值为auto时，它们的值为0px，
• 当right和bottom取值为bottom时，他们默认的值为100%；
  

这里要认真的理解一下，结合right和bottom值是相对于left和top的。这样应该会好理解一些。