2-2 页面之间的卷滚切换效果
本节编程练习不计算学习进度，请电脑登录imooc.com操作

页面之间的卷滚切换效果

页面的横向布局我们已经实现好了，那么如何实现页面与页面之间的切换呢？

一般来说要根据布局的结构来，大体有2种：

显而易见，移动父容器简单很多，只需要改变父容器X轴的坐标就可以了。如果父容器中子元素有很多的话，那么我们会考虑第二种算法，可以做成动态加载，但是这种处理是超级麻烦，这里不讨论

改变坐标的处理可以分为2种：

传统的就是修改元素style是坐标属性，这个没什么好说的，使用简单，一般都需要配合定时器使用。

CSS3引入了一个新的属性Transform

transform 属性向元素应用 2D 或 3D 转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜。其中会有一个值translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的，translate3d这里指明了3d就是启用了3d加速，也就是启动GPU来处理，性能更强

过去，为了实现这种平滑的过渡效果，我们需要借助于Flash技术，现在只需要简单的使用CSS3 Transition的方法就可以实现，这是一个简单的动画属性

transition可以设置一些具体的参数，比如动画执行的时间，变化的算法、动画延时等等，具体大家可以搜索更细致的资料

这里需要特别注意的就是：

transform属性是静态属性，不是动画属性，一旦写到style里面，将会直接显示作用，无任何变化过程

简单的一句话描述就是

通过设置transition的一些参数，让translate3d这个属性发生变化

如何通过translate结合transition改变元素的页面位置，我们具体看到右边的代码

通过点击"点击页面开始切换"出现页面切换的效果

任务

打开index.html文件，在代码的102行填入相应代码，这样能让页面开始滚动

element.css({
    'transition-timing-function': 'linear',
    'transition-duration': '5000ms',
    'transform': 'translate3d(-' + (width * 2) + 'px,0px,0px)' //设置页面X轴移动
});
index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title>慕课七夕主题</title>
  7.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  8.     <style type="text/css">
  9.     * {
  10.         padding: 0;
  11.         margin: 0;
  12.     }
  13.  
  14.     ul,
  15.     li {
  16.         list-style-type: none;
  17.     }
  18.  
  19.     #content {
  20.         width: 100%;
  21.         height: 100%;
  22.         /* top: 20%;
  23.         left: 20%; */
  24.         overflow: hidden;
  25.         position: absolute;
  26.     }
  27.  
  28.     .content-wrap {
  29.         position: relative;
  30.     }
  31.  
  32.     .content-wrap > li {
  33.         background: #CAE1FF;
  34.         color: red;
  35.         float: left;
  36.         overflow: hidden;
  37.         position: relative;
  38.     }
  39.  
  40.     li:nth-child(2) {
  41.         background: #9BCD9B;
  42.     }
  43.  
  44.     li:nth-child(3) {
  45.         background: yellow;
  46.     }
  47.  
  48.     button {
  49.         width: 100px;
  50.         height: 50px;
  51.     }
  52.  
  53.     .button {
  54.         position: absolute;
  55.         bottom: 0;
  56.     }
  57.     </style>
  58. </head>
  59.  
  60. <body>
  61.     <div id='content'>
  62.         <ul class='content-wrap'>
  63.             <!-- 第一副画面 -->
  64.             <li> 页面1 </li>
  65.             <!-- 第二副画面 -->
  66.             <li> 页面2 </li>
  67.             <!-- 第三副画面 -->
  68.             <li> 页面3 </li>
  69.         </ul>
  70.         <div class="button">
  71.             <button>点击切换页面</button>
  72.         </div>
  73.     </div>
  74.     <script type="text/javascript">
  75.         var container = $("#content");
  76.         // 获取第一个子节点
  77.         var element = container.find(":first");
  78.         // li页面数量
  79.         var slides = element.find("li");
  80.         // 获取容器尺寸
  81.         var width = container.width();
  82.         var height = container.height();
  83.  
  84.         // 设置li页面总宽度
  85.         element.css({
  86.             width: (slides.length * width) + 'px',
  87.             height: height + 'px'
  88.         });
  89.  
  90.         // 设置每一个页面li的宽度
  91.         $.each(slides, function(index) {
  92.             var slide = slides.eq(index); // 获取到每一个li元素    
  93.             slide.css({ // 设置每一个li的尺寸
  94.                 width: width + 'px',
  95.                 height: height + 'px'
  96.             });
  97.         });
  98.  
  99.         // 绑定一个事件，触发通过
  100.         $('button').click(function() {
  101.             // 在5秒的时间内，移动X的位置，为2个页面单位
  102.             //?
  103.         });
  104.     </script>
  105. </body>
  106.  
  107. </html>
下一节