6-1 页面布局
本节编程练习不计算学习进度，请电脑登录imooc.com操作

页面布局

第二个主题页面的布局，涉及了背景图，商店，门，灯等几个元素。为了方便静态页面布局，可以用个小技巧，修改下代码通过scrollTo直接定位到当前页面

//用来临时调整页面，1个页面宽，也就是第二个页面
swipe.scrollTo(container.width(),0)

新建一个pageB.css的样式文件，我们把与第二个页面相关的css样式都写入这个文件中，这个布局挺简单，自适应的关系采用的是百分比布局，可以按照UI设计的尺寸计算百分比

稍微注意下的就是商店的灯的亮度切换采用的是切换背景图片，背景图如果是没有预加载的话就有一个闪屏的问题，所以特意做了一个b_background_preload的节点让图片先加载，设置一个坐标不可见

商店的门是可以开关的所以在布局上会有个一左一右的处理

最后我们会用一个background-size:100% 100%的属性处理图片，不管分辨率怎么变化，图片始终都是填充整个尺寸

看看右边就是布局后的效果

任务

index.htmlBoyWalk.jsSwipe.jsstyle.csspageA.csspageB.css 
  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.     <link rel='stylesheet' href='pageB.css' />
  10.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  11.     <script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
  12.     <script type="text/javascript" src="Swipe.js"></script>
  13.     <script type="text/javascript" src="BoyWalk.js"></script>
  14. </head>
  15.  
  16. <body>
  17.     <div id='content'>
  18.         <ul class='content-wrap'>
  19.             <!-- 第一副画面 -->
  20.             <li>
  21.                 <!-- 背景 -->
  22.                 <div class="a_background">
  23.                     <div class="a_background_top"></div>
  24.                     <div class="a_background_middle"></div>
  25.                     <div class="a_background_botton"></div>
  26.                 </div>
  27.                 <!-- 云 -->
  28.                 <div class="cloudArea">
  29.                     <div class="cloud"></div>
  30.                     <div class="cloud"></div>
  31.                 </div>
  32.                 <!-- 太阳 -->
  33.                 <div id="sun"></div>
  34.             </li>
  35.             <!-- 第二副画面 -->
  36.             <li>
  37.                 <!-- 背景图 -->
  38.                 <div class="b_background"></div>
  39.                 <div class="b_background_preload"></div>
  40.                 <!-- 商店 -->
  41.                 <div class="shop">
  42.                     <div class="door">
  43.                         <div class="door-left"></div>
  44.                         <div class="door-right"></div>
  45.                     </div>
  46.                     <!-- 灯 -->
  47.                     <div class="lamp"></div>
  48.                 </div>
  49.             </li>
  50.             <li> 页面3 </li>
  51.         </ul>
  52.         <div id="boy" class="charector"></div>
  53.     </div>
  54. </body>
  55. <script type="text/javascript">
  56.     $(function() {
  57.  
  58.         var container = $("#content");
  59.         var swipe = Swipe(container);
  60.         // 页面滚动到指定的位置
  61.         function scrollTo(time, proportionX) {
  62.             var distX = container.width() * proportionX;
  63.             swipe.scrollTo(distX, time);
  64.         }
  65.  
  66.         ////////////////////////////////////////////////////////
  67.         // ================== 动画处理 ====================== //
  68.         ////////////////////////////////////////////////////////
  69.  
  70.         //用来临时调整页面
  71.         swipe.scrollTo(container.width(), 0);
  72.  
  73.         var boy = BoyWalk();
  74.  
  75.     })
  76. </script>
  77.  
  78. </html>
  1. /**
  2.  * 小孩走路
  3.  * @param {[type]} container [description]
  4.  */
  5. function BoyWalk() {
  6.  
  7.     var container = $("#content");
  8.     // 页面可视区域
  9.     var visualWidth = container.width();
  10.     var visualHeight = container.height();
  11.  
  12.     // 获取数据
  13.     var getValue = function(className) {
  14.         var $elem = $('' + className + '');
  15.             // 走路的路线坐标
  16.         return {
  17.             height: $elem.height(),
  18.             top: $elem.position().top
  19.         };
  20.     }
  21.     // 路的Y轴
  22.     var pathY = function() {
  23.         var data = getValue('.a_background_middle');
  24.         return data.top + data.height / 2;
  25.     }();
  26.  
  27.     var $boy = $("#boy");
  28.     var boyWidth = $boy.width();
  29.     var boyHeight = $boy.height();
  30.  
  31.     // 设置下高度    
  32.     $boy.css({
  33.         top: pathY - boyHeight + 25
  34.     })
  35.  
  36.     // 暂停走路
  37.     function pauseWalk() {
  38.         $boy.addClass('pauseWalk');
  39.     }
  40.  
  41.     // 恢复走路
  42.     function restoreWalk() {
  43.         $boy.removeClass('pauseWalk');
  44.     }
  45.  
  46.     // css3的动作变化
  47.     function slowWalk() {
  48.         $boy.addClass('slowWalk');
  49.     }
  50.  
  51.     // 用transition做运动
  52.     function stratRun(options, runTime) {
  53.         var dfdPlay = $.Deferred();
  54.         // 恢复走路
  55.         restoreWalk();
  56.         // 运动的属性
  57.         $boy.transition(
  58.             options,
  59.             runTime,
  60.             'linear',
  61.             function() {
  62.                 dfdPlay.resolve(); // 动画完成
  63.             });
  64.         return dfdPlay;
  65.     }
  66.  
  67.     // 开始走路
  68.     function walkRun(time, dist, disY) {
  69.         time = time || 3000;
  70.         // 脚动作
  71.         slowWalk();
  72.         // 开始走路
  73.         var d1 = stratRun({
  74.             'left': dist + 'px',
  75.             'top': disY ? disY : undefined
  76.         }, time);
  77.         return d1;
  78.     }
  79.  
  80.     // 计算移动距离
  81.     function calculateDist(direction, proportion) {
  82.         return (direction == "x" ?
  83.             visualWidth : visualHeight) * proportion;
  84.     }
  85.  
  86.     return {
  87.         // 开始走路
  88.         walkTo: function(time, proportionX, proportionY) {
  89.             var distX = calculateDist('x', proportionX)
  90.             var distY = calculateDist('y', proportionY)
  91.             return walkRun(time, distX, distY);
  92.         },
  93.         // 停止走路
  94.         stopWalk: function() {
  95.             pauseWalk();
  96.         },
  97.         setColoer:function(value){
  98.             $boy.css('background-color',value)
  99.         }
  100.     }
  101. }
  1. /////////
  2. //页面滑动 //
  3. /////////
  4.  
  5.  
  6. /**
  7.  * [Swipe description]
  8.  * @param {[type]} container [页面容器节点]
  9.  * @param {[type]} options   [参数]
  10.  */
  11. function Swipe(container) {
  12.     // 获取第一个子节点
  13.     var element = container.find(":first");
  14.     var swipe = {};
  15.  
  16.     // li页面数量
  17.     var slides = element.find("li");
  18.  
  19.     // 获取容器尺寸
  20.     var width = container.width();
  21.     var height = container.height();
  22.  
  23.     // 设置li页面总宽度
  24.     element.css({
  25.         width: (slides.length * width) + 'px',
  26.         height: height + 'px'
  27.     })
  28.  
  29.     // 设置每一个页面li的宽度
  30.     $.each(slides, function(index) {
  31.         var slide = slides.eq(index); // 获取到每一个li元素    
  32.         slide.css({
  33.             width: width + 'px',
  34.             height: height + 'px'
  35.         });
  36.     });
  37.  
  38.     // 监控完成与移动
  39.     swipe.scrollTo = function(x, speed) {
  40.         // 执行动画移动
  41.         element.css({
  42.             'transition-timing-function' : 'linear',
  43.             'transition-duration'        : speed + 'ms',
  44.             'transform'                  : 'translate3d(-' + x + 'px,0px,0px)'
  45.         });
  46.         return this;
  47.     }
  48.  
  49.     return swipe;
  50. }
  1. * {
  2.        padding: 0;
  3.        margin: 0;
  4.    }
  5.    ol,
  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.        background: #CAE1FF;
  26.        color: red;
  27.        float: left;
  28.        overflow: hidden;
  29.        position: relative;
  30.    }
  31.  
  32.  
  33.    li:nth-child(3) {
  34.        background: yellow;
  35.    }
  36.  
  37.    a {
  38.        position: absolute;
  39.        top: 50%;
  40.        left: 40%;
  41.    }
  42.  
  43.     button {
  44.         width: 100px;
  45.         height: 50px;
  46.     }
  47.  
  48.     .button {
  49.         position: absolute;
  50.         bottom: 0;
  51.     }
  52.  
  53.    .charector {
  54.        position: absolute;
  55.        left: 0%;
  56.        top: 55%;
  57.        position: absolute;
  58.        width: 100%;
  59.        height: 100%;
  60.        width: 151px;
  61.        height: 291px;
  62.        background: url(http://img.mukewang.com/55ade248000198ae10550582.png) -0px -291px no-repeat;
  63.    }
  64.  
  65.    .slowWalk {
  66.        -webkit-animation-name: person-slow;
  67.        -webkit-animation-duration: 950ms;
  68.        -webkit-animation-iteration-count: infinite;
  69.        -webkit-animation-timing-function: steps(1, start);
  70.        -moz-animation-name: person-slow;
  71.        -moz-animation-duration: 950ms;
  72.        -moz-animation-iteration-count: infinite;
  73.        -moz-animation-timing-function: steps(1, start)
  74.    }
  75.    /*普通慢走*/
  76.  
  77.    @-webkit-keyframes person-slow {
  78.        0% {
  79.            background-position: -0px -291px;
  80.        }
  81.        25% {
  82.            background-position: -602px -0px;
  83.        }
  84.        50% {
  85.            background-position: -302px -291px;
  86.        }
  87.        75% {
  88.            background-position: -151px -291px;
  89.        }
  90.        100% {
  91.            background-position: -0px -291px;
  92.        }
  93.    }
  94.  
  95.    @-moz-keyframes person-slow {
  96.        0% {
  97.            background-position: -0px -291px;
  98.        }
  99.        25% {
  100.            background-position: -602px -0px;
  101.        }
  102.        50% {
  103.            background-position: -302px -291px;
  104.        }
  105.        75% {
  106.            background-position: -151px -291px;
  107.        }
  108.        100% {
  109.            background-position: -0px -291px;
  110.        }
  111.    }
  1. /*背景图*/
  2.  
  3. .a_background {
  4.     width: 100%;
  5.     height: 100%;
  6.     /*    background-image: url("../images/QixiA.png");
  7.     background-size: 100% 100%;*/
  8.  
  9.     position: absolute;
  10. }
  11.  
  12. .a_background_top {
  13.     width: 100%;
  14.     height: 71.6%;
  15.     background-image: url("http://img1.sycdn.imooc.com//55addf6900019d8f14410645.png");
  16.     background-size: 100% 100%;
  17. }
  18.  
  19. .a_background_middle {
  20.     width: 100%;
  21.     height: 13.1%;
  22.     background-image: url("http://img1.sycdn.imooc.com//55addf800001ff2e14410118.png");
  23.     background-size: 100% 100%;
  24. }
  25.  
  26. .a_background_botton {
  27.     width: 100%;
  28.     height: 15.3%;
  29.     background-image: url("http://img1.sycdn.imooc.com//55addfcb000189b314410138.png");
  30.     background-size: 100% 100%;
  31. }
  32.  
  33. /*人物暂停*/
  34.  
  35. .pauseWalk {
  36.     animation-play-state: paused;
  37. }
  38. /*-------- 太阳自转以及动画 --------*/
  39.  
  40. #sun {
  41.     background: url("http://img1.sycdn.imooc.com//55ade004000106c202010201.png") no-repeat;
  42.     position: absolute;
  43.     z-index: 1;
  44.     top: -30px;
  45.     height: 201px;
  46.     width: 201px;
  47.     right: 40%;
  48. }
  49.  
  50. .rotation {
  51.     -webkit-animation-name: rotation;
  52.     -webkit-animation-duration: 30s;
  53.     -webkit-animation-iteration: 1;
  54.     -moz-animation-name: rotation;
  55.     -moz-animation-duration: 30s;
  56.     -moz-animation-iteration: 1;
  57. }
  58.  
  59. @-webkit-keyframes rotation {
  60.     0% {
  61.         transform: translateX(0) translateY(0);
  62.     }
  63.     100% {
  64.         transform: translateX(-2000px) translateY(400px);
  65.     }
  66. }
  67.  
  68. @-moz-keyframes rotation {
  69.     0% {
  70.         transform: translateX(0) translateY(0);
  71.     }
  72.     100% {
  73.         transform: translateX(-2000px) translateY(400px);
  74.     }
  75. }
  76. /*天空云*/
  77.  
  78. .cloud {
  79.     z-index: 2;
  80.     position: absolute;
  81. }
  82.  
  83. .cloud1 {
  84.     width: 20%;
  85.     height: 30%;
  86.     left: -5%;
  87.     top: 15%;
  88.     background: url("http://img1.sycdn.imooc.com//55addfde0001aec501810101.png") no-repeat;
  89.     -webkit-animation-name: smallCloud;
  90.     -webkit-animation-duration: 30s;
  91.     -webkit-animation-iteration: infinite;
  92.     -moz-animation-name: smallCloud;
  93.     -moz-animation-duration: 30s;
  94.     -moz-animation-iteration: infinite
  95. }
  96.  
  97. .cloud2 {
  98.     width: 20%;
  99.     height: 30%;
  100.     right: -5%;
  101.     background: url("http://img1.sycdn.imooc.com//55addff500016df503010140.png") no-repeat;
  102.     -webkit-animation-name: largeCloud;
  103.     -webkit-animation-duration: 60s;
  104.     -webkit-animation-iteration: infinite;
  105.     -moz-animation-name: largeCloud;
  106.     -moz-animation-duration: 60s;
  107.     -moz-animation-iteration: infinite;
  108. }
  109.  
  110. @-webkit-keyframes smallCloud {
  111.     0% {
  112.         left: -5%;
  113.     }
  114.     100% {
  115.         left: 100%;
  116.     }
  117. }
  118.  
  119. @-moz-keyframes smallCloud {
  120.     0% {
  121.         left: -5%;
  122.     }
  123.     100% {
  124.         left: 100%;
  125.     }
  126. }
  127.  
  128. @-webkit-keyframes largeCloud {
  129.     0% {
  130.         right: -5%;
  131.     }
  132.     100% {
  133.         right: 100%;
  134.     }
  135. }
  136.  
  137. @-moz-keyframes largeCloud {
  138.     0% {
  139.         right: -5%;
  140.     }
  141.     100% {
  142.         right: 100%;
  143.     }
  144. }
  1. /*背景图*/
  2.  
  3. .b_background {
  4.     width: 100%;
  5.     height: 100%;
  6.     background-image: url("http://img1.sycdn.imooc.com//55ade06f00015a0d14410901.png");
  7.     background-size: 100% 100%;
  8.     position: absolute;
  9. }
  10.  
  11. .b_background_preload {
  12.     background: url("http://img1.sycdn.imooc.com//55ade0be0001a37914410901.png") no-repeat -9999px -9999px;
  13. }
  14.  
  15. .lamp-bright {
  16.    background-image: url("http://img1.sycdn.imooc.com//55ade0be0001a37914410901.png");
  17. }
  18.  
  19.  
  20. /*商店*/
  21.  
  22. .shop {
  23.     width: 39.5%;
  24.     height: 35.5%;
  25.     position: absolute;
  26.     left: 29%;
  27.     top: 36.5%;
  28. }
  29.  
  30. .door {
  31.     position: absolute;
  32.     width: 32%;
  33.     height: 100%;
  34.     top: 32%;
  35.     height: 68%;
  36.     overflow: hidden;
  37.     left: 58.5%;
  38. }
  39.  
  40. .door-left,
  41. .door-right {
  42.     width: 50%;
  43.     height: 100%;
  44.     position: absolute;
  45. }
  46.  
  47. .door-left {
  48.     left: 0%;
  49.     background: url(http://img.mukewang.com/55ade1140001050d00910231.png);
  50.     background-size: 100% 100%;
  51. }
  52.  
  53. .door-right {
  54.     left: 50%;
  55.     background: url(http://img.mukewang.com/55ade12100019f5b00910231.png);
  56.     background-size: 100% 100%;
  57. }
下一节