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>