CSS3_移动端_开机动画

移动端的开机动画

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

height: 100%; overflow: hidden; 禁止滚动条

初始包含块为 #wrap ，即设置 position: relative;

包裹设置 width 和 height，给 img 设置 width: 100%;

（相对来说）项目当前的进度 = 图片加载成功的个数 / 图片的总数 = 加载条的进度

js，css，font，依赖包，都加载比较快， img 加载慢，近乎决定了项目加载速度（window.onload）
img 在使用的时候才会加载

创建一个数组： 保存图片的路径

data.js

/**** data.js ****/
var imgPath = {
    logo:["./img/logo/logo1.png", "./img/logo/logo2.png"],
    pageBg:["./img/bg1.jpg", "./img/bg2.jpg"],
    loadIcon:["./img/load/ico1.png", "./img/load/ico2.png"]
};

// imgPath.logo[1]
// imgPath[logo][1]

index.js

<script type="text/javascript" src="./js/data.js"></script>

<script type="text/javascript">
    var imgArr = [];    // 保存项目的图片路径
    
    for(var attr in imgPath){
        // 每个数组 imgPath[attr];
        
        // 将 imgPath[attr] 的元素放入 imgArr 中
        // 合并 imgArr 和 imgPath[attr]
     imgArr = imgArr.concat(imgPath[atrr]);
    }
</script>

/**** 
    var arr1 = [1,2];
    var arr2 = [3,4,5];

    arr1.concat(arr2);    // arr1[1,2];    arr2[3,4,5];
    arr1 = arr1.concat(arr2);
****/

var img = new Image(); // 项目中，创建 <img src="" /> 的方式

// 只要 img 图片加载成功，就会触发 img.onload 事件
var imgCount;

// 项目进度 = 图片加载成功数 / 要加载的图片总数
for(var i=0; i<imgArr.length; i++){
    var img = new Image();
    img.src = imgArr[i];
    
    img.onload = function(){
        imgCount += 1;
        tips.innerHTML = "已加载"+
                          Math.round(imgCount/imgArr.length*100)+
                          "%";
    };
};

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title></title>
        
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <meta name="viewport"
              content="user-scalable=no,
                       width=device-width,
                       initial-scale=1.0,
                       minimum-scale=1.0,
                       maximum-scale=1.0"/>
        
        <style rel="stylesheet" type="text/css">
            html, body, div, ul, li {
                margin: 0;
                padding: 0;
            }
            
            html, body {
                width: 100%;
                height: 100%;    /* 参照屏幕区域的高 */
                min-width: 600px;
                overflow: hidden;
            }
            
            #wrap {
                width: 100%;
                min-height: 100%;
                
                background: cadetblue;
            }
            
            #content {
                width: 100%;
                
                padding-bottom: 50px;
                
                font-size: 14px;
                background: darkgrey;
            }
            
            #footer {
                width: 100%;
                height: 50px;
                
                margin-top: -50px;
                
                background: chocolate;
                text-align: center;
                line-height: 50px;
            }
            
            /**** Loading Animation ****/
            #loading_box {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                transform-style: preserve-3d;
                perspective: 300px;
                
                background-color: #ccc0;
            }
            
            /**** Rotating Tips ****/
            #loading_tips {
                margin-bottom: 10px;
                
                font-size: 48px;
                text-align: center;
                animation: rotateLetter 3s infinite alternate;
            }
            @keyframes rotateLetter {
                from {
                    transform: rotateY(-30deg);
                }
                to {
                    transform: rotateY(30deg);
                }
            }
            
            /**** Floating Words ****/
            #loading_animation {
                list-style: none;
                background-color: #bbb0;
            }
            
            #loading_animation li:last-child {
                margin-right: 0px;
            }
            
            #loading_animation li {
                float: left;
                
                margin-right: 10px;
                animation: jumpLetter 3s infinite alternate;
            }
            @keyframes jumpLetter {
                from {
                    transform: translateY(0px);
                }
                
                to {
                    transform: translateY(-15px);
                }
            }
        </style>
    </head>
    
    <body>
        
        <!-- 模拟屏幕区域 -->
        <div id="wrap">
            
            <!-- 内容区域 -->
            <div id="content">
                <div id="loading_box">
                    <div id="loading_tips">
                    </div>
                    <ul id="loading_animation">
                        <li>L</li>
                        <li>o</li>
                        <li>a</li>
                        <li>d</li>
                        <li>i</li>
                        <li>n</li>
                        <li>g</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 底部区域 -->
        <div id="footer">
        
        </div>
        
        <script type="text/javascript" src="./js/index.js"></script>
        <script type="text/javascript" src="./js/data.js"></script>
        <script type="text/javascript">
            var lis = document.querySelectorAll("#loading_animation li");
            
            var colorArr = ["red", "green", "blue"];
            var i = 0;
            for(i=0; i<lis.length; i++){
                lis[i].style.color = colorArr[i%3];
                
                lis[i].style.animationDelay = i*100+"ms";
            }
            
        var loadingTips = document.getElementById('loading_tips');

        //创建数组：保存项目的图片
        var imgArr = [];

        //保存图片加载成功的个数
        var index = 0;

        //把data中图片路径塞到imgArr中
        for(var i in imgData){    //枚举对象上的每一个属性
            imgArr = imgArr.concat(imgData[i])
        };

        //项目进度 = 图片加载成功的个数 / 图片总数
        for(var i=0;i<imgArr.length;i++){
            //创建img
            var img = new Image();//创建图片对象
            
            img.src = imgArr[i];

            //图片加载成功
            img.onload = function () {
                index++;

                console.log(Math.round(index/imgArr.length*100));
                loadingTips.innerHTML = Math.round(index/imgArr.length*100)+'%';
            };
        }
        </script>
    </body>
</html>

posted @ 2018-11-15 10:46 耶梦加德阅读(602) 评论(0) 编辑收藏举报

刷新页面返回顶部

我即狂澜，且力不可挽

CSS3_移动端_开机动画

公告