1、css代码
此处在制作进度条时，是旋转进度条的半圆（红色），背景使用灰白（如果使用红色作为背景，旋转灰白遮罩，在浏览器中可能会有渲染bug）
1 .wrapper{ display:block;position:relative;width:100px;height:100px;border-radius:50px;overflow:hidden; } 2 .pie { position:absolute;background-color:#e74c3c;width:100px;height:100px; } 3 .pie1 { clip:rect(0px,50px,100px,0px); } 4 .pie2 { clip:rect(0px,100px,100px,50px); } 5 .hold { width:100px;height:100px;position:absolute;z-index:1; } 6 .hold1 { clip:rect(0px,100px,100px,50px); } 7 .hold2 { clip:rect(0px,50px,100px,0px); } 8 .bg { width:100px;height:100px;background-color:#f4f6f6;position:absolute; } 9 .circle{position:absolute;background-color:#FFF;width:90px;height:90px;border-radius:45px;left:5px;top:5px;z-index:10;}
以下的css的代码会产生渲染bug（导致灰白外侧有红色细线）
1 .wrapper{ display:block;position:relative;width:100px;height:100px;border-radius:50px;overflow:hidden; } 2 .pie { position:absolute;background-color:#f4f6f6;width:100px;height:100px; } 3 .pie1 { clip:rect(0px,100px,100px,50px); } 4 .pie2 { clip:rect(0px,50px,100px,0px); } 5 .hold { width:100px;height:100px;position:absolute;z-index:1; } 6 .hold1 { clip:rect(0px,100px,100px,50px); } 7 .hold2 { clip:rect(0px,50px,100px,0px); } 8 .bg { width:100px;height:100px;background-color:#e74c3c;position:absolute; } 9 .circle{position:absolute;background-color:#FFF;width:90px;height:90px;border-radius:45px;left:5px;top:5px;z-index:10;}
2、html代码
1 <div class="wrapper"> 2 <div class="hold hold1"> 3 <div class="pie pie1"></div> 4 </div> 5 <div class="hold hold2"> 6 <div class="pie pie2"></div> 7 </div> 8 <div class="bg"></div> 9 <div class="circle"></div> 10 </div> 11 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
3、js代码
1 var pie = { 2 run:function(opts){ 3 if(!opts.pie1 || !opts.pie2) throw new Error(‘must be element pie1 and pie2.‘); 4 var pie1 = $(opts.pie1), pie2 = $(opts.pie2); 5 var percent = opts.percent || 0; 6 var step = opts.step || 3; 7 var delay = opts.delay || 50; 8 var callback = opts.callback || $.noop; 9 var i = 0, rage = 360 * percent; 10 var djs = function(){ 11 i = i + step; 12 if(i <= rage){ 13 if(i <= 180){ 14 if((180 - i) < step){ i = 180; } 15 pie1.css("-webkit-transform","rotate(" + i + "deg)"); 16 } else { 17 if((rage - i) < step){ i = rage; } 18 pie2.css("-webkit-transform","rotate(" + (i-180) + "deg)"); 19 } 20 callback(i, rage); 21 setTimeout(djs, delay); 22 } 23 }; 24 djs(); 25 } 26 }; 27 pie.run({ 28 pie1:".pie1", 29 pie2:".pie2", 30 percent:0.75 31 });
参考demo：http://liumiao.me/demo/count/