<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery.js"></script> <style type="text/css"> .circle{216px;height:215px;position:absolute;border-radius:50%;background:#e47235;} .pie_left,.pie_right{216px;height:216px;position:absolute;top:0;left:0;} .left,.right{display:block;216px;height:216px;background:#b3b3b3;border-radius:50%;position:absolute;top:0;left:0;transform:rotate(0deg);} .pie_right,.right{clip:rect(0,auto,auto,108px);} .left,.pie_left{clip:rect(0,108px,auto,0);} .mask{196px;height:196px;border-radius:50%;left:10px;top:10px;background:#222126;position:absolute;text-align:center;line-height:196px;font-size:56px;font-family:'microsoft yahei';color:#b3b3b3;} </style> </head> <body> <div class="circle"> <div class="pie_left"><div class="left"></div></div> <div class="pie_right"><div class="right"></div></div> <div class="mask J-num"><span>0</span>%</div> </div> <script> var srcs = [ 'images/water.png', 'images/water-light.png', 'images/bg.jpg', 'images/1-bg.png', 'images/3-bg.png', 'images/4-bg.png', 'images/bg1.jpg', 'images/index-pro.png', 'images/index-txt2.png', 'images/logo.png', 'images/pro-1.png', 'images/pro-2.png', 'images/pro-intro-nav.png', 'images/pro-intro-tit.png', 'images/rope2.png', 'images/2-bg.png', 'images/3-txt-a.png', 'images/3-txt-b.png', 'images/3-txt-c.png', 'images/3-txt-d.png', 'images/back.png', 'images/index-txt1.png', 'images/load-txt.png', 'images/nav-bg.png', 'images/pro-1-txt.png', 'images/pro-2-txt.png', 'images/pro-intro.png', 'images/rope1.png', 'images/rope3.png', 'images/1.png', 'images/pro-rope1.png', 'images/pro-rope2.png', 'images/pro-rope3.png' ]; var oImages = [],n=0,i; function loading(){ for (i=0,len=srcs.length;i<len;i++){ (function(i){ oImages[i]=new Image() oImages[i].onload=function(){ n++; num=parseInt((n/len*100).toFixed(2)); if(n<len/2){ $(".left").css("transform","rotate("+num*180/100+"deg)"); }else{ $(".left").css("transform","rotate(180deg)"); $(".right").css("transform","rotate("+(num-50)*180/100+"deg)"); } $(".J-num").html(num+"%"); if(n>=len){ $(".J-num").html(100+"%"); $(".right").css("transform","rotate(180deg)"); // } }; oImages[i].src=srcs[i]; })(i); } } loading(); </script> </body> </html>
demo: 预览地址