切屏动画原理

  1. 以四图全屏切屏为例，首先需要制作一个大的div宽高分别为100%，即全屏显示。
  2. 然后制作4个子元素，依次放入4张图片，并且设置图片的宽高同父级的一样。如下图：

image.png

  1. 将父级元素整体向上移动一屏之后，将显示出第2张图片，依次方法显示第3、第4张图片
  2. 即现实切屏。如下图：

image.png

  1. 代码如下：
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>切屏动画</title>
  5.     <meta charset="utf-8" />
  6.     <style type="text/css">
  7.       html,body{
  8.         width:100%;
  9.           height:100%;
  10.           margin:0px;
  11.           overflow:hidden;
  12.       }
  13.       #mainDiv{
  14.           position:relative;
  15.           left:0px;
  16.           top:0px;
  18.         width:100%;
  19.           height:100%;
  21.           transition:all 1s ease;
  22.       }
  23.       #mainDiv div{
  24.         width:100%;
  25.           height:100%;
  27.           background-repeat:no-repeat;
  28.           background-position:center;
  29.           background-size:cover;
  30.       }
  31.       .page1{
  32.         background-image:url("/res/htmlclassics/full/images/131.jpg");
  33.       }
  34.       .page2{
  35.         background-image:url("/res/htmlclassics/full/images/132.jpg");
  36.       }
  37.       .page3{
  38.         background-image:url("/res/htmlclassics/full/images/133.jpg");
  39.       }
  40.       .page4{
  41.         background-image:url("/res/htmlclassics/full/images/134.jpg");
  42.       }
  43.       .btn_list{
  44.         position:fixed;
  45.           top:30%;
  46.           right:50px;
  47.       }
  48.       ul{
  49.         list-style-type:none;
  50.       }
  51.       li{
  52.         width:20px;
  53.           height:20px;
  54.           margin-top:10px;
  55.           border-radius:20px;
  56.           background-color:#3D3D3D;
  57.           cursor:pointer;
  58.       }
  59.       #li0{
  60.         background-color:#10508D;
  61.       }
  62.     </style>
  63.     <script type="text/javascript">
  64.       var index = 0;//当前显示第几屏。0代表第1屏
  66.       window.onload = function(){
  68.           //为li添加鼠标点击事件
  69.           for(var i=0;i<=3;i++){
  70.               document.getElementById("li"+i).onclick = function(){
  72.                   index = this.id.replace("li","");//通过id获取当前显示第几屏
  74.                   pageAnimate();
  75.               }
  76.           }
  78.           //窗口大小重置
  79.           window.onresize = function(){
  80.               //暂时去掉mainDiv的过渡动画
  81.               document.getElementById("mainDiv").style.transition = "all 0s ease";
  83.               pageAnimate();//切屏
  85.               //重新加上mainDiv的过渡动画
  86.               window.setTimeout(function(){
  87.                   document.getElementById("mainDiv").style.transition = "all 1s ease";
  88.               },10);
  89.           }
  90.       }
  91.       //设置显示哪一屏，并设置右浮动按扭显示样式
  92.       function pageAnimate(){
  94.           var offsetHeight = document.body.offsetHeight;
  95.           document.getElementById("mainDiv").style.top = -(offsetHeight * index)+"px";
  97.           //设置右则浮动按扭的显示样式
  98.           for(var i=0;i<=3;i++){
  99.               document.getElementById("li"+i).style.backgroundColor = "#3D3D3D";
  100.           }
  101.           document.getElementById("li"+index).style.backgroundColor = "#10508D";
  102.       }
  103.     </script>
  104.   </head>
  105.   <body>
  107.     <div id="mainDiv">
  108.       <div class="page1"></div>
  109.       <div class="page2"></div>
  110.       <div class="page3"></div>
  111.       <div class="page4"></div>
  112.     </div>
  114.     <div class="btn_list">
  115.       <ul>
  116.         <li id="li0"></li>
  117.         <li id="li1"></li>
  118.         <li id="li2"></li>
  119.         <li id="li3"></li>
  120.       </ul>
  121.     </div>
  123.   </body>
  124. </html>