<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery.js"></script>
<style type="text/css">
.circle{width:216px;height:215px;position:absolute;border-radius:50%;background:#e47235;}
.pie_left,.pie_right{width:216px;height:216px;position:absolute;top:0;left:0;}
.left,.right{display:block;width: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{width: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:预览地址
时间： 2024-11-26 09:04:56