利用jQuery和CSS实现环形百分比进度条
利用jQuery和CSS实现环形进度条方法一、CSS3实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{font-family:"微软雅黑";}
.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{width:200px;height:200px;background:#00aacc;border-radius:50%;position:absolute;top:0;left:0;}
.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:20px;font-weight:bold;color:#00aacc;}
</style>
</head>
<body>
<div class="circle" style="left:0">
<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>
<div class="circle" style="left:220px">
<div class="pie_left"><div class="left"></div></div>
<div class="pie_right"><div class="right"></div></div>
<div class="mask"><span>15</span>%</div>
</div>
<div class="circle" style="left:440px">
<div class="pie_left"><div class="left"></div></div>
<div class="pie_right"><div class="right"></div></div>
<div class="mask"><span>30</span>%</div>
</div>
<div class="circle" style="left:660px">
<div class="pie_left"><div class="left"></div></div>
<div class="pie_right"><div class="right"></div></div>
<div class="mask"><span>60</span>%</div>
</div>
<div class="circle" style="left:880px">
<div class="pie_left"><div class="left"></div></div>
<div class="pie_right"><div class="right"></div></div>
<div class="mask"><span>90</span>%</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
$('.circle').each(function(index, el){
var num = $(this).find('span').text() * 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 - 180) + "deg)");
};
});
});
</script>
</body>
</html>
效果截图：
原理非常的简单，在这个方案中，最主要使用了CSS3的transform中的rotate和CSS3的clip两个属性。用他们来实现半圆和旋转效果。
我们需要考虑的是，圆环的转动幅度大小，是由圆环里面数字的百分比决定的，从0%-100%，那么圆弧被分成了每份3.6°；而在180°，也就是50%进度之前，左侧的半弧是不动的，当超过50%，左边的半弧才会有转动显示。
方法二、JQ+CSS+图片实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.progressbar{text-align:center;line-height:44px;width:44px;display:block;background:url(progressbar.png);height:44px;font-size:14px;margin-left:20px;float:left;font-family:"微软雅黑";font-size:11px;}
.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;}
.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{background-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-position:-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:-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 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;}
.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;}
.progressbar-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-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{background-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{background-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-position:-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:-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:-4266px 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;}
.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;}
.progressbar-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-98{background-position:-5292px 0px;}
.progressbar-99{background-position:-5346px 0px;}
.progressbar-100{background-position:-5400px 0px;}</style>
</head>
<body>
<div class="progressbar">
<span>10</span>%
</div>
<div class="progressbar">
<span>20</span>%
</div>
<div class="progressbar">
<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>
<div class="progressbar">
<span>100</span>%
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>$(function(){
$('.progressbar').each(function(index,el){
var num=$(this).find('span').text();
$(this).addClass('progressbar-' + num);
});
});
</script>
</body>
</html>
这种方法相对来说就比较简单了，但是也是挺麻烦的一种。
首先，我们需要一个非常冗长的一个图片……图片的内容，就是每1°旋转角度，就是一张图片…100张…
然后让容器为这个图片为背景，理由用background-position写100个类样式做背景偏移…很累啊….进度每改变一下，就引用相对应的类。
虽然这种方法虽然比较繁琐比较麻烦，但是实现出来的效果，也较纯css3的丰富，兼容性也更好。
效果截图：
需要的图片：
看大家倾向于那种效果吧，个人感觉各有利弊各有春秋。如果有更好的方法和思路，欢迎反馈。
以上所有实例打包：
页:
[1]