zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    在SQLite中使用索引优化查询速度
    SQLite支持的SQL数据操作
    left (outer) join , right (outer) join, full (outer) join, (inner) join, cross join 区别
    深入理解Android内存管理原理(六)
    Merge Sorted Array
    Sort Colors
    Construct Binary Tree from Preorder and Inorder Traversal
    Binary Tree Postorder Traversal
    Symmetric Tree
    Rotate Image
  • 原文地址:https://www.cnblogs.com/Koming/p/9771494.html
Copyright © 2011-2022 走看看