css3圓形百分比進度條的實現原理

原文地址：css3圓形百分比進度條的實現原理

今天早上起來在查看jquery插件機制的時候，一不當心點進了css3圓形百分比進度條的相關文章，因而一發不可收拾，開始折騰了。。。

關於圓形圈的實現，想必用2個圓心相同，半徑不一樣的div便可實現。大圓的顏色即爲圓形進度條的底色，小圓的顏色即爲中間百分比的遮罩顏色白色，還要加上左右2邊一邊一個半圓，也就是說總共應該有4個div，一個大圓的div中包含3個div，左右一邊半個圓，遮罩div處於最上面。

那這裏的一邊半個圓怎麼實現呢？使用css的clip屬性便可切圖同樣的只顯示一半，這裏稍後詳細介紹。

這種實現效果實際上是能夠的（當百分比不超過50%的時候），當超過之後，就會發現，好比是60%，但進度條顯示的是40%，這是爲何呢？由於左右旋轉的div沒有遮住的緣故，超過了各自所在的範圍應該hidden才行，否則多餘的部分一樣會顯示出來。如圖所示，當40%的時候正常，當60%的時候是同樣的，

那咱們是否是還須要額外的2個div，來起到遮蓋的做用，來看html代碼

<div class="circle">
<div class="pie_left"><div class="left"></div></div>
<div class="pie_right"><div class="right"></div></div>
<div class="mask"><span>10</span>%</div>
</div>

樣式：

.circle {
width: 200px;
height: 200px;
position: absolute;
border-radius: 50%;
background: #0cc;
}
 
.left,.right{
width:200px;
height:200px;
position: absolute;
top: 0px;left: 0px;
}
.pie_left, .pie_right{
width:200px;
height:200px;
position: absolute;
border-radius: 50%;
top: 0px;left: 0px;
background: red;
}
 
.pie_right,.right {
clip:rect(0,auto,auto,100px);
}
.pie_left , .left{
clip:rect(0,100px,auto,0);
}
 
/*
*當top和left取值爲auto時，至關於0
*當bottom和right取值爲auto時，至關於100%
*/
.mask {
width: 150px;
height: 150px;
border-radius: 50%;
left: 25px;
top: 25px;
/*background: #FFF;*/
position: absolute;
text-align: center;
line-height: 150px;
font-size: 16px;
}

　　

這裏js代碼就比較簡單了，只須要稍微作一下判斷：

$(function(){
if( $('.mask span').text() <= 50 ){
$('.pie_right').css('transform','rotate('+($('.mask span').text()*3.6)+'deg)');
}else{
$('.pie_right').css('transform','rotate(180deg)');
$('.pie_left').css('transform','rotate('+(($('.mask span').text()-50)*3.6)+'deg)');
}
})

　　

說明：由於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呢？那就整張圖片就隱藏了。

還有須要注意的是，

1. 當left和top取值爲auto時，它們的值爲0px，
2. 當right和bottom取值爲bottom時，他們默認的值爲100%；

這裏要認真的理解一下，結合right和bottom值是相對於left和top的。這樣應該會好理解一些。