利用jQuery和CSS實現(xiàn)環(huán)形進度條

1、利用jQuery和CSS實現(xiàn)環(huán)形進度條最近項目里遇到一個有意思的效果，那就是圓形進度條，類似于這樣的：實現(xiàn)類似這樣的效果方法很多。我主要想了2個解決方案，都是通過jQuery和CSS實現(xiàn)的，下面就一一道來：方法一：jQuery + CSS3實現(xiàn)原理原理非常的簡單，在這個方案中，最主要使用了CSS3的transform中的rotate和CSS3的clip兩個屬性。用他們來實現(xiàn)半圓和旋轉效果。半環(huán)的實現(xiàn)先來看其結構。HTML<div class="pie_right"> <div class="right"></div>

2、<div class="mask"><span>0</span>%</div></div>結構非常簡單。這樣的結構，大家一看就清楚。CSS.pie_right width:200px; height:200px; position: absolute; top: 0; left: 0; background:#0cc;.right width:200px; height:200px; background:#00aacc; border-radius: 50%; position: absolute; top: 0

3、; left: 0;.pie_right, .right clip:rect(0,auto,auto,100px);.mask width: 150px; height: 150px; border-radius: 50%; left: 25px; top: 25px; background: #FFF; position: absolute; text-align: center; line-height: 150px; font-size: 20px; background: #0cc; /* mask 是不需要剪切的，此處只是為了讓大家看到效果*/ clip:rect(0,auto,au

4、to,75px); 實現(xiàn)半圓還是挺簡單的，利用border-radius做出圓角，然后利用clip做出剪切效果，（clip使用方法，詳見站內介紹），mask的部分是為了遮擋外面的容器，致使在視覺上產(chǎn)生圓環(huán)的效果：旋轉的話，那更容易實現(xiàn)了，就是在CSS的right中加入（我沒做瀏覽器兼容代碼，請大家自行加入）：.right transform: rotate(30deg);這樣就可以看到一個半弧旋轉的效果了。整環(huán)的實現(xiàn)同樣道理，拼接左半邊圓環(huán)，為了讓我們html結構更易懂以后寫js更簡便，我對結構做了一下改造，并作了效果優(yōu)化：HTML<div class="circle"

5、;> <div class="pie_left"><div class="left"></div></div> <div class="pie_right"><div class="right"></div></div> <div class="mask"><span>0</span>%</div></div>CSS.circle wi

6、dth: 200px; height: 200px; position: absolute; border-radius: 50%; background: #0cc;.pie_left, .pie_right width: 200px; height: 200px; position: absolute; top: 0;left: 0;.left, .right display: block; width:200px; height:200px; background:#00aacc; border-radius: 50%; position: absolute; top: 0; left:

7、 0; transform: rotate(30deg);.pie_right, .right clip:rect(0,auto,auto,100px);.pie_left, .left clip:rect(0,100px,auto,0);.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;效果如下：圓環(huán)最

8、終效果Ok了，基本上我們的圓環(huán)已經(jīng)實現(xiàn)完成了，下面是加入JS效果。首先，我們需要考慮的是，圓環(huán)的轉動幅度大小，是由圓環(huán)里面數(shù)字的百分比決定的，從0%-100%，那么圓弧被分成了每份3.6°；而在180°，也就是50%進度之前，左側的半弧是不動的，當超過50%，左邊的半弧才會有轉動顯示。那么，原理明確之后，其jQuery代碼如下（刪除CSS中的旋轉效果，在JS里重寫）：$(function() $('.circle').each(function(index, el) var num = $(this).find('span').text()

9、* 3.6; if (num<=180) $(this).find('.right').css('transform', "rotate(" + num + "deg)"); else $(this).find('.right').css('transform', "rotate(180deg)"); $(this).find('.left').css('transform', "rotate(" + (num -

10、 180) + "deg)"); ; ););則，改變mask里面的span 的數(shù)值，我們就會看到最終效果。這樣我們只要從后臺獲取當前流程的進度值，傳給span，那么我們頁面上就能看到這樣圓環(huán)的進度效果啦。jQuery + 圖片實現(xiàn)原理這種方法相對來說就比較簡單了，但是也是挺麻煩的一種。首先，我們需要一個非常冗長的一個圖片圖片的內容，就是每1°旋轉角度，就是一張圖片100張例如：然后讓容器為這個圖片為背景，理由用background-position寫100個類樣式做背景偏移很累啊.進度每改變一下，就引用相對應的類。HTML我們類似于有這樣的一個結構，當然這里面有

11、很多個這樣的結構：<div class="progressbar"> <span>0</span>% </div>比如說我們的案例的中結構：<div class="progressbar"> <span>10</span>% </div><div class="progressbar"> <span>20</span>% </div><div class="progressba

12、r"> <span>30</span>% </div><div class="progressbar"> <span>50</span>% </div><div class="progressbar"> <span>70</span>% </div><div class="progressbar"> <span>90</span>% </div&g

13、t;<div class="progressbar"> <span>100</span>% </div>CSS樣式是比較苦逼的事情，我們需要在每個位置修改他的background-position。也就是從0%100%，將會有100個：.progressbar text-align: center; line-height: 44px; width: 44px; display: block; background: url(progressbar.png); height: 44px; font-size: 14px; ma

14、rgin-left:60px;.progressbar-1 background-position: 0px 0px;.progressbar-2 background-position: -54px 0px;.progressbar-3 background-position: -108px 0px;.progressbar-4 background-position: -162px 0px;.progressbar-5 background-position: -216px 0px;.progressbar-6 background-position: -270px 0px;.progre

15、ssbar-7 background-position: -324px 0px;.progressbar-8 background-position: -378px 0px;.progressbar-9 background-position: -432px 0px;.progressbar-10 background-position: -486px 0px;.progressbar-11 background-position: -540px 0px;.progressbar-12 background-position: -594px 0px;.progressbar-13 backgr

16、ound-position: -648px 0px;.progressbar-14 background-position: -702px 0px;.progressbar-15 background-position: -756px 0px;.progressbar-16 background-position: -810px 0px;.progressbar-17 background-position: -864px 0px;.progressbar-18 background-position: -918px 0px;.progressbar-19 background-positio

17、n: -972px 0px;.progressbar-20 background-position: -1026px 0px;.progressbar-21 background-position: -1080px 0px;.progressbar-22 background-position: -1134px 0px;.progressbar-23 background-position: -1188px 0px;.progressbar-24 background-position: -1242px 0px;.progressbar-25 background-position: -129

18、6px 0px;.progressbar-26 background-position: -1350px 0px;.progressbar-27 background-position: -1404px 0px;.progressbar-28 background-position: -1458px 0px;.progressbar-29 background-position: -1512px 0px;.progressbar-30 background-position: -1566px 0px;.progressbar-31 background-position: -1620px 0p

19、x;.progressbar-32 background-position: -1674px 0px;.progressbar-33 background-position: -1728px 0px;.progressbar-34 background-position: -1782px 0px;.progressbar-35 background-position: -1836px 0px;.progressbar-36 background-position: -1890px 0px;.progressbar-37 background-position: -1944px 0px;.pro

20、gressbar-38 background-position: -1998px 0px;.progressbar-39 background-position: -2052px 0px;.progressbar-40 background-position: -2106px 0px;.progressbar-41 background-position: -2160px 0px;.progressbar-42 background-position: -2214px 0px;.progressbar-43 background-position: -2268px 0px;.progressb

21、ar-44 background-position: -2322px 0px;.progressbar-45 background-position: -2376px 0px;.progressbar-46 background-position: -2430px 0px;.progressbar-47 background-position: -2484px 0px;.progressbar-48 background-position: -2538px 0px;.progressbar-49 background-position: -2592px 0px;.progressbar-50

22、background-position: -2700px 0px;.progressbar-51 background-position: -2754px 0px;.progressbar-52 background-position: -2808px 0px;.progressbar-53 background-position: -2862px 0px;.progressbar-54 background-position: -2916px 0px;.progressbar-55 background-position: -2970px 0px;.progressbar-56 backgr

23、ound-position: -3024px 0px;.progressbar-57 background-position: -3078px 0px;.progressbar-58 background-position: -3132px 0px;.progressbar-59 background-position: -3186px 0px;.progressbar-60 background-position: -3240px 0px;.progressbar-61 background-position: -3294px 0px;.progressbar-62 background-p

24、osition: -3348px 0px;.progressbar-63 background-position: -3402px 0px;.progressbar-64 background-position: -3456px 0px;.progressbar-65 background-position: -3510px 0px;.progressbar-66 background-position: -3564px 0px;.progressbar-67 background-position: -3618px 0px;.progressbar-68 background-positio

25、n: -3672px 0px;.progressbar-69 background-position: -3726px 0px;.progressbar-70 background-position: -3780px 0px;.progressbar-71 background-position: -3834px 0px;.progressbar-72 background-position: -3888px 0px;.progressbar-73 background-position: -3942px 0px;.progressbar-74 background-position: -39

26、96px 0px;.progressbar-75 background-position: -4050px 0px;.progressbar-76 background-position: -4104px 0px;.progressbar-77 background-position: -4158px 0px;.progressbar-78 background-position: -4212px 0px;.progressbar-79 background-position: -4266px 0px;.progressbar-80 background-position: -4320px 0

27、px;.progressbar-81 background-position: -4376px 0px;.progressbar-82 background-position: -4428px 0px;.progressbar-83 background-position: -4482px 0px;.progressbar-84 background-position: -4536px 0px;.progressbar-85 background-position: -4590px 0px;.progressbar-86 background-position: -4644px 0px;.progressbar-87 background-position: -4698px 0px;.progressbar-88 background-position: -