H5序列帧播放

从http://bluestreeter.adidas.com.cn/index.html这个H5上扒下来的代码
  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport"
  6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">
  7     <meta http-equiv="Cache-Control" content="max-age=3600"/>
  8     <title>序列帧播放</title>
  9     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
 10     <style>
 11         /*----Loading----*/
 12         #load {
 13             width: 100vw;
 14             height: 100vh;
 15             background: #0081c7;
 16             position: fixed;
 17             top: 0;
 18             left: 0;
 19             text-align: center;
 20             z-index: 200;
 21         }
 22 
 23         #load img {
 24             position: absolute;
 25             display: none;
 26             top: 0;
 27             left: 0;
 28             width: 100%;
 29             height: 100%;
 30         }
 31 
 32         #load img:first-child {
 33             display: block;
 34         }
 35 
 36         #landingMain {
 37             width: 100vw;
 38             height: 100vh;
 39             position: absolute;
 40             top: 0;
 41             left: 0;
 42             overflow: hidden;
 43         }
 44     </style>
 45 </head>
 46 <body>
 47 <section id="load"></section>
 48 </body>
 49 <script>
 50     var keySources = [],
 51         keyInterval = 0;
 52     for (var i = 0; i <= 114; i += 2) {
 53         var num = "";
 54         var len = i.toString().length;
 55         if (len == 1) {
 56             num = "00";
 57         }
 58         if (len == 2) {
 59             num = "0";
 60         }
 61         if (len == 3) {
 62             num = "";
 63         }
 64         keySources.push("http://bluestreeter.adidas.com.cn/assets/images/loading/" + num + i + ".png");
 65     }
 66     loadImages(keySources, loadAnimate);
 67 
 68     function loadImages(sources, callback) {
 69         var loadedImages = 0;
 70         var numImages = 0;
 71         var images = [];
 72         numImages = sources.length;
 73         for (var i = 0, len = sources.length; i < len; i++) {
 74             images[i] = new Image();
 75             images[i].onload = function () {
 76                 if (++loadedImages >= numImages) {
 77                     callback(images);
 78                 }
 79             };
 80             images[i].src = sources[i];
 81         }
 82     }
 83 
 84     function loadAnimate() {
 85 
 86         playKeyframesAnimation($("#load"), keySources, 50);
 87     }
 88 
 89     function playKeyframesAnimation(ele, keySources, keyTime) {
 90         keySources.forEach(function (item, i) {
 91             var keyHtml = '<img src="' + item + '" >';
 92             ele.append(keyHtml);
 93         });
 94 
 95         var i = 0;
 96         keyInterval = setInterval(function () {
 97             i++;
 98             if (i >= keySources.length) {
 99                 i = 0;
100             }
101             ele.find("img").eq(i).show().siblings().hide();
102         }, keyTime)
103     }
104 </script>
105 </html>
猜你喜欢
