1、利用 jQuery 和 CSS 实现环形进度条最近项目里遇到一个有意思的效果，那就是圆形进度条，类似于这样的：实现类似这样的效果方法很多。我主要想了2个解决方案，都是通过 jQuery 和 CSS 实现的，下面就一一道来：方法一：jQuery + CSS3实现原理原理非常的简单，在这个方案中，最主要使用了 CSS3的 transform 中的 rotate 和 CSS3的clip 两个属性。用他们来实现半圆和旋转效果。半环的实现先来看其结构。HTML0%结构非常简单。这样的结构，大家一看就清楚。CSS.pie_right width:200px; height:200px;position:
2、absolute;top: 0;left: 0;background:#0cc;.right width:200px; height:200px;background:#00aacc;border-radius: 50%;position: absolute; top: 0;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: absol
3、ute;text-align: center;line-height: 150px;font-size: 20px;background: #0cc;/* mask 是不需要剪切的，此处只是为了让大家看到效果*/clip:rect(0,auto,auto,75px); 实现半圆还是挺简单的，利用 border-radius 做出圆角，然后利用 clip 做出剪切效果，（clip 使用方法，详见站内介绍） ，mask 的部分是为了遮挡外面的容器，致使在视觉上产生圆环的效果：旋转的话，那更容易实现了，就是在 CSS 的 right 中加入（我没做浏览器兼容代码，请大家自行加入）：.right tr
4、ansform: rotate(30deg);这样就可以看到一个半弧旋转的效果了。整环的实现同样道理，拼接左半边圆环，为了让我们 html 结构更易懂以后写 js 更简便，我对结构做了一下改造，并作了效果优化：HTML0%CSS.circle width: 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, .rig
5、ht display: block;width:200px; height:200px;background:#00aacc;border-radius: 50%;position: absolute;top: 0;left: 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:
6、25px;background: #FFF;position: absolute;text-align: center;line-height: 150px;font-size: 16px;效果如下：圆环最终效果Ok 了，基本上我们的圆环已经实现完成了，下面是加入 JS 效果。首先，我们需要考虑的是，圆环的转动幅度大小，是由圆环里面数字的百分比决定的，从0%-100%，那么圆弧被分成了每份3.6；而在180，也就是50%进度之前，左侧的半弧是不动的，当超过50%，左边的半弧才会有转动显示。那么，原理明确之后，其 jQuery 代码如下（删除 CSS 中的旋转效果，在 JS 里重写）：$(fun
7、ction() $(.circle).each(function(index, el) var num = $(this).find(span).text() * 3.6;if (num0% 比如说我们的案例的中结构：10% 20% 30% 50% 70% 90% 100% CSS样式是比较苦逼的事情，我们需要在每个位置修改他的 background-position。也就是从0%100%，将会有100个：.progressbar text-align: center;line-height: 44px; width: 44px; display: block; background: url
8、(progressbar.png); height: 44px; font-size: 14px; margin-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;.p
9、rogressbar-6 background-position: -270px 0px;.progressbar-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 ba
10、ckground-position: -594px 0px;.progressbar-13 background-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-pos
11、ition: -918px 0px;.progressbar-19 background-position: -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: -
12、1242px 0px;.progressbar-25 background-position: -1296px 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
13、 0px;.progressbar-31 background-position: -1620px 0px;.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;.
14、progressbar-37 background-position: -1944px 0px;.progressbar-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;.progre
15、ssbar-43 background-position: -2268px 0px;.progressbar-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-
16、49 background-position: -2592px 0px;.progressbar-50 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 bac
17、kground-position: -2970px 0px;.progressbar-56 background-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 backgroun
18、d-position: -3294px 0px;.progressbar-62 background-position: -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-posi
19、tion: -3618px 0px;.progressbar-68 background-position: -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:
20、-3942px 0px;.progressbar-74 background-position: -3996px 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: -4266p
21、x 0px;.progressbar-80 background-position: -4320px 0px;.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;
22、.progressbar-86 background-position: -4644px 0px;.progressbar-87 background-position: -4698px 0px;.progressbar-88 background-position: -4752px 0px;.progressbar-89 background-position: -4806px 0px;.progressbar-90 background-position: -4860px 0px;.progressbar-91 background-position: -4914px 0px;.progr
23、essbar-92 background-position: -4968px 0px;.progressbar-93 background-position: -5022px 0px;.progressbar-94 background-position: -5076px 0px;.progressbar-95 background-position: -5130px 0px;.progressbar-96 background-position: -5184px 0px;.progressbar-97 background-position: -5238px 0px;.progressbar
24、-98 background-position: -5292px 0px;.progressbar-99 background-position: -5346px 0px;.progressbar-100 background-position: -5400px 0px;JavaScript当然，在这个效果中，我们也离不开 JavaScript:$(function() $(.progressbar).each(function(index, el) var num = $(this).find(span).text();$(this).addClass(progressbar- + num);););效果如下：虽然这种方法虽然比较繁琐比较麻烦，但是实现出来的效果，也较纯 css3的丰富，兼容性也更好。到这里，这个案例算是完成，看大家倾向于那种效果吧，个人感觉各有利弊各有春秋。如果有更好的方法和思路，欢迎大家一起讨论。
