1、切屏动画原理

以四图全屏切屏为例，首先需要制作一个大的div宽高分别为100%，即全屏显示。
然后制作4个子元素，依次放入4张图片，并且设置图片的宽高同父级的一样。如下图：
切屏动画 - 图1
将父级元素整体向上移动一屏之后，将显示出第2张图片，依次方法显示第3、第4张图片，即现实切屏。如下图：
切屏动画 - 图2

  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.         //去掉滚动条
  12.           overflow:hidden;
  13.       }
  14.       #mainDiv{
  15.         //绝对定位
  16.           position:relative;
  17.           left:0px;
  18.           top:0px;
  19.           //用百分比宽高时先设置html、body的宽高
  20.             width:100%;
  21.           height:100%;
  22.           //过度动画
  23.           transition:all 1s ease;
  24.       }
  25.       #mainDiv div{
  26.             width:100%;
  27.           height:100%;
  28.           //不平铺展示
  29.           background-repeat:no-repeat;
  30.         //图片位置居中显示
  31.           background-position:center;
  32.         //图片一直放大，直到占满整个屏幕
  33.           background-size:cover;
  34.       }
  35.       .page1{
  36.         background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/131.jpg");
  37.       }
  38.       .page2{
  39.         background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/132.jpg");
  40.       }
  41.       .page3{
  42.         background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/133.jpg");
  43.       }
  44.       .page4{
  45.         background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/134.jpg");
  46.       }
  48.       .btn_list{
  49.         //以浏览器窗口为定位
  50.         position:fixed;
  51.         //上边距
  52.           top:30%;
  53.         //右边距
  54.           right:50px;
  55.       }
  56.       ul{
  57.         //去掉小黑点
  58.         list-style-type:none;
  59.       }
  60.       li{
  61.             width:20px;
  62.           height:20px;
  63.         //每个li的上边距
  64.           margin-top:10px;
  65.         //圆角
  66.           border-radius:20px;
  67.           background-color:#3D3D3D;
  68.         //鼠标指针小手样式
  69.           cursor:pointer;
  70.       }
  71.       #li0{
  72.         background-color:#10508D;
  73.       }
  74.     </style>
  75.     <script type="text/javascript">
  76.       var index = 0;//当前显示第几屏。0代表第1屏
  78.       window.onload = function(){
  80.           //为li添加鼠标点击事件
  81.           for(var i=0;i<=3;i++){
  82.               document.getElementById("li"+i).onclick = function(){
  84.             //将本个li标签的id里的li替换成""，替换后的id为数字
  85.                   index = this.id.replace("li","");//通过id获取当前显示第几屏
  87.                   pageAnimate();
  88.               }
  89.           }
  91.           //窗口大小重置，从窗口图片出现错乱，如果再次点击按钮就正常了，所以窗口高度应重新计算
  92.           window.onresize = function(){
  93.               //暂时去掉mainDiv的过渡动画，大div有过渡动画，窗口改变时会有一小段切换的动画
  94.               document.getElementById("mainDiv").style.transition = "all 0s ease";
  96.               pageAnimate();//切屏
  98.               //重新加上mainDiv的过渡动画，如果直接写改变动画的效果，切换窗口大小还是会有一小段过渡动画
  99.           //利用定时器来添加这一过渡动画效果
  100.               window.setTimeout(function(){
  101.                   document.getElementById("mainDiv").style.transition = "all 1s ease";
  102.               },10);
  103.           }
  104.       }
  105.       //设置显示哪一屏，并设置右浮动按扭显示样式
  106.       function pageAnimate(){
  107.           //一个页面的高度
  108.           var height = document.body.offsetHeight;
  109.         //切换图片
  110.           document.getElementById("mainDiv").style.top = -(height * index)+"px";
  112.           //设置右则浮动按扭的显示样式
  113.           for(var i=0;i<=3;i++){
  114.               document.getElementById("li"+i).style.backgroundColor = "#3D3D3D";
  115.           }
  116.           document.getElementById("li"+index).style.backgroundColor = "#10508D";
  117.       }
  118.     </script>
  119.   </head>
  120.   <body>
  121.     <div id="mainDiv">
  122.       <div class="page1"></div>
  123.       <div class="page2"></div>
  124.       <div class="page3"></div>
  125.       <div class="page4"></div>
  126.     </div>
  127.     <div class="btn_list">
  128.       <ul>
  129.         <li id="li0"></li>
  130.         <li id="li1"></li>
  131.         <li id="li2"></li>
  132.         <li id="li3"></li>
  133.       </ul>
  134.     </div>
  135.   </body>
  136. </html>