利用jQuery及CSS实现环形进度条.docVIP

利用jQuery和CSS实现环形进度条 最近项目里遇到一个有意思的效果，那就是圆形进度条，类似于这样的： 实现类似这样的效果方法很多。我主要想了2个解决方案，都是通过jQuery和CSS实现的，下面就一一道来： 方法一：jQuery + CSS3 实现原理 原理非常的简单，在这个方案中，最主要使用了CSS3的transform中的rotate和CSS3的clip两个属性。用他们来实现半圆和旋转效果。 半环的实现 先来看其结构。 HTML div class=pie_right div class=right/div div class=maskspan0/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; 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,auto,75px); } 实现半圆还是挺简单的，利用border-radius做出圆角，然后利用clip做出剪切效果，（clip使用方法，详见站内介绍），mask的部分是为了遮挡外面的容器，致使在视觉上产生圆环的效果： 旋转的话，那更容易实现了，就是在CSS的right中加入（我没做浏览器兼容代码，请大家自行加入）： .right { transform: rotate(30deg); } 这样就可以看到一个半弧旋转的效果了。 整环的实现 同样道理，拼接左半边圆环，为了让我们html结构更易懂以后写js更简便，我对结构做了一下改造，并作了效果优化： HTML div class=circle div class=pie_leftdiv class=left/div/div div class=pie_rightdiv class=right/div/div div class=maskspan0/span%/div /div 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, .right { 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-radi