加载图片动画
Posted 幽竹小妖
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了加载图片动画相关的知识，希望对你有一定的参考价值。
<!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: 预览地址
以上是关于加载图片动画的主要内容，如果未能解决你的问题，请参考以下文章