3-1 布局的自适应动态调整
本节编程练习不计算学习进度，请电脑登录imooc.com操作

布局的自适应动态调整

小孩男走路是贯穿三个主题页面，因此小男孩在布局上不能嵌入任何一个页面内，否则无法切换到下一个页面中了。所以最终小男孩的布局与页面根节点属于并列结构

页面的整体结构如下：

<div id='content'>
    <ul class='content-wrap'>
        <li> 页面1 </li>
        <li> 页面2 </li>
        <li> 页面3 </li>
    </ul>
    //与页面根节点并列
    <div id="boy" class="charector"></div>   
</div>

小男孩的布局很简单，但是要注意3个问题：

观察效果会发现：小男孩总是会沿着中间那个路线走动。因为背景图是靠百分比控制的，会随着分辨率的变化而变化。但是人物是固定的尺寸是无法变化的（合成图的关系），这里只能通过JS动态调整

人物坐标的算法也比较简单：

小男孩的top坐标值 = 中间路段的中间坐标值 - 小男孩的高度

具体可以参考右边代码区域的实现，增加了pageA文件设置第一个页面的背景布局，因为人物的布局需要以背景布局为参考点

这里我特别提出一个问题：

雪碧图一般情况下是无法自适应缩放的，本课程为了简单处理使用"雪碧图"的元素都是原尺寸，没有缩放。 大家可以思考下，雪碧图如何做是自适应处理？ 具体我在9-2最后一节给我给了具体是缩放方案，做为一个课后的思考点。

任务

打开index.html文件，在代码的63行填入相应代码，这样可以通过JS动态修正小孩男的top布局坐标了

$boy.css({
    top: pathY - boyHeight + 25
 });
index.htmlstyle.csspageA.cssSwipe.js 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title>慕课七夕主题</title>
  7.     <link rel='stylesheet' href='style.css' />
  8.     <link rel='stylesheet' href='pageA.css' />
  9.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  10.     <script type="text/javascript" src="Swipe.js"></script>
  11. </head>
  12. <style type="text/css">
  13.     .charector {
  14.         width: 151px;
  15.         height: 291px;
  16.         background: url(http://img1.sycdn.imooc.com//55ade248000198ae10550582.png) -0px -291px no-repeat;
  17.         position: absolute;
  18.         /* 设置一个元素的坐标 */
  19.         left: 6%;
  20.         top: 55%;
  21.     }
  22. </style>
  23.  
  24. <body>
  25.     <div id='content'>
  26.         <ul class='content-wrap'>
  27.             <li>
  28.                 <div class="a_background">
  29.                     <div class="a_background_top"></div>
  30.                     <div class="a_background_middle"></div>
  31.                     <div class="a_background_botton"></div>
  32.                 </div>
  33.             </li>
  34.             <li> 页面2 </li>
  35.             <li> 页面3 </li>
  36.         </ul>
  37.         <div id="boy" class="charector"></div>
  38.     </div>
  39.     <script type="text/javascript">
  40.         var swipe = Swipe($("#content"));
  41.  
  42.         // 获取数据
  43.         var getValue = function(className) {
  44.             var $elem = $('' + className + '');
  45.                 // 走路的路线坐标
  46.             return {
  47.                 height: $elem.height(),
  48.                 top: $elem.position().top
  49.             };
  50.         };
  51.  
  52.         // 路的Y轴
  53.         var pathY = function() {
  54.             var data = getValue('.a_background_middle');
  55.             return data.top + data.height / 2;
  56.         }();
  57.  
  58.         var $boy = $("#boy");
  59.         var boyHeight = $boy.height();
  60.  
  61.         // 修正小男孩的正确位置
  62.         // 路的中间位置减去小孩的高度，25是一个修正值
  63.         //？
  64.     </script>
  65. </body>
  66. </html>
  1. * {
  2.         padding: 0;
  3.         margin: 0;
  4.     }
  5.  
  6.     ul,
  7.     li {
  8.         list-style-type: none;
  9.     }
  10.  
  11.     /*主体部分*/
  12.     #content {
  13.         width: 100%;
  14.         height: 100%;
  15.         /* top: 20%; */
  16.         overflow: hidden;
  17.         position: absolute;
  18.     }
  19.  
  20.     .content-wrap {
  21.         position: relative;
  22.     }
  23.  
  24.     .content-wrap > li {
  25.         float: left;
  26.         overflow: hidden;
  27.         position: relative;
  28.     }
  1. /*背景图*/
  2.  
  3. .a_background {
  4.     width: 100%;
  5.     height: 100%;
  6.     position: absolute;
  7. }
  8.  
  9. .a_background_top{
  10.     width: 100%;
  11.     height: 71.6%;
  12.     background-image: url("http://img1.sycdn.imooc.com//55addf6900019d8f14410645.png");
  13.     background-size: 100% 100%;
  14. }
  15.  
  16.  
  17. .a_background_middle{
  18.     width: 100%;
  19.     height: 13.1%;
  20.     background-image: url("http://img1.sycdn.imooc.com//55addf800001ff2e14410118.png");
  21.     background-size: 100% 100%;
  22. }
  23.  
  24. .a_background_botton{
  25.     width: 100%;
  26.     height: 15.3%;
  27.     background-image: url("http://img1.sycdn.imooc.com//55addfcb000189b314410138.png");
  28.     background-size: 100% 100%;
  29. }
  1. /////////
  2. //页面滑动 //
  3. /////////
  4.  
  5. /**
  6.  * [Swipe description]
  7.  * @param {[type]} container [页面容器节点]
  8.  * @param {[type]} options   [参数]
  9.  */
  10. function Swipe(container) {
  11.     // 获取第一个子节点
  12.     var element = container.find(":first");
  13.     var swipe = {};
  14.  
  15.     // li页面数量
  16.     var slides = element.find("li");
  17.  
  18.     // 获取容器尺寸
  19.     var width = container.width();
  20.     var height = container.height();
  21.  
  22.     // 设置li页面总宽度
  23.     element.css({
  24.         width: (slides.length * width) + 'px',
  25.         height: height + 'px'
  26.     });
  27.  
  28.     // 设置每一个页面li的宽度
  29.     $.each(slides, function(index) {
  30.         var slide = slides.eq(index); // 获取到每一个li元素    
  31.         slide.css({
  32.             width: width + 'px',
  33.             height: height + 'px'
  34.         });
  35.     });
  36.  
  37.     // 监控完成与移动
  38.     swipe.scrollTo = function(x, speed) {
  39.         // 执行动画移动
  40.         element.css({
  41.             'transition-timing-function' : 'linear',
  42.             'transition-duration'        : speed + 'ms',
  43.             'transform'                  : 'translate3d(-' + x + 'px,0px,0px)'
  44.         });
  45.         return this;
  46.     };
  47.  
  48.     return swipe;
  49. }
下一节