当前位置:首页 > clip的使用,并且用clip实现一个loading效果

clip的使用,并且用clip实现一个loading效果

发布于 2018-07-16 阅读 740 次 CSS Javascript

基础知识

rect (top, right, bottom, left)
一张图理解这四个值

代码

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <script src="js/jquery.js"></script>
  7. <style type="text/css">
  8. .circle{width:216px;height:215px;position:absolute;border-radius:50%;background:#e47235;}
  9. .pie_left,.pie_right{width:216px;height:216px;position:absolute;top:0;left:0;}
  10. .left,.right{display:block;width:216px;height:216px;background:#b3b3b3;border-radius:50%;position:absolute;top:0;left:0;transform:rotate(0deg);}
  11. .pie_right,.right{clip:rect(0,auto,auto,108px);}
  12. .left,.pie_left{clip:rect(0,108px,auto,0);}
  13. .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;}
  14. </style>
  15. </head>
  16. <body>
  17. <div class="circle">
  18. <div class="pie_left"><div class="left"></div></div>
  19. <div class="pie_right"><div class="right"></div></div>
  20. <div class="mask J-num"><span>0</span>%</div>
  21. </div>
  22. <script>
  23. var srcs = [
  24. 'images/water.png',
  25. 'images/water-light.png',
  26. 'images/bg.jpg',
  27. 'images/1-bg.png',
  28. 'images/3-bg.png',
  29. 'images/4-bg.png',
  30. 'images/bg1.jpg',
  31. 'images/index-pro.png',
  32. 'images/index-txt2.png',
  33. 'images/logo.png',
  34. 'images/pro-1.png',
  35. 'images/pro-2.png',
  36. 'images/pro-intro-nav.png',
  37. 'images/pro-intro-tit.png',
  38. 'images/rope2.png',
  39. 'images/2-bg.png',
  40. 'images/3-txt-a.png',
  41. 'images/3-txt-b.png',
  42. 'images/3-txt-c.png',
  43. 'images/3-txt-d.png',
  44. 'images/back.png',
  45. 'images/index-txt1.png',
  46. 'images/load-txt.png',
  47. 'images/nav-bg.png',
  48. 'images/pro-1-txt.png',
  49. 'images/pro-2-txt.png',
  50. 'images/pro-intro.png',
  51. 'images/rope1.png',
  52. 'images/rope3.png',
  53. 'images/1.png',
  54. 'images/pro-rope1.png',
  55. 'images/pro-rope2.png',
  56. 'images/pro-rope3.png'
  57. ];
  58. var oImages = [],n=0,i;
  59. function loading(){
  60. for (i=0,len=srcs.length;i<len;i++){
  61. (function(i){
  62. oImages[i]=new Image()
  63. oImages[i].onload=function(){
  64. n++;
  65. num=parseInt((n/len*100).toFixed(2));
  66. if(n<len/2){
  67. $(".left").css("transform","rotate("+num*180/100+"deg)");
  68. }else{
  69. $(".left").css("transform","rotate(180deg)");
  70. $(".right").css("transform","rotate("+(num-50)*180/100+"deg)");
  71. }
  72. $(".J-num").html(num+"%");
  73. if(n>=len){
  74. $(".J-num").html(100+"%");
  75. $(".right").css("transform","rotate(180deg)");
  76. //
  77. }
  78. };
  79. oImages[i].src=srcs[i];
  80. })(i);
  81. }
  82. }
  83. loading();
  84. </script>
  85. </body>
  86. </html>