6-2 开门关门效果的实现
本节编程练习不计算学习进度，请电脑登录imooc.com操作

开门关门效果的实现

JavasSript代码的编写是根据HTML结构来的，合理的HTML结构布局，可以让代码更少更简单

先看看门的布局

<div class="door">
    <div class="door-left"></div>
    <div class="door-right"></div>
</div>

通过一个父容器定位，左右门可以采用left处理分别是0%与50%，这样我们在通过JS控制时候只需要改变left就可以形成开关门的效果

开门关门的效果比较简单，用之前3-3节用过的transition插件可以实现

在实现的时候还需要注意几个问题

开门的left的坐标是往反向变化，所以变化的值是：

关门的left还原到0%与50%即可。

在监听动画完成上，采用用了一个count计数，count开始为2，当执行第一个回调后会减1，只有当二个回调执行的时候，这个defer.resolve才会执行

var complete = function() {
    if (count == 1) {
        defer.resolve();
        return;
    }
    count--
}

在代码封装部分，把开关门的动画调用接口分开，但是相同的部分合并成doorAction最终的处理方法，并合并了Deferred的处理，这样可以让开关门的这个动作可以很好融入到跟整体的流程中

任务

打开index.html文件，在代码的97行填入相应代码，可以观察到右边开关门的变化

doorRight.transition({
    'left': right
}, time, complete);
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 class="button">
  54.             <button>开门</button>
  55.             <button>关门</button>
  56.         </div>
  57.     </div>
  58. </body>
  59. <script type="text/javascript">
  60. $(function() {
  61.  
  62.     var container = $("#content");
  63.     var swipe = Swipe(container);
  64.     // 页面滚动到指定的位置
  65.     function scrollTo(time, proportionX) {
  66.         var distX = container.width() * proportionX;
  67.         swipe.scrollTo(distX, time);
  68.     }
  69.  
  70.     ////////////////////////////////////////////////////////
  71.     // ================= 动画处理 ======================= //
  72.     ////////////////////////////////////////////////////////
  73.  
  74.     // 用来临时调整页面
  75.     swipe.scrollTo(container.width(), 0);
  76.  
  77.     BoyWalk();
  78.  
  79.     function doorAction(left, right, time) {
  80.         var $door = $('.door');
  81.         var doorLeft = $('.door-left');
  82.         var doorRight = $('.door-right');
  83.         var defer = $.Deferred();
  84.         var count = 2;
  85.         // 等待开门完成
  86.         var complete = function() {
  87.             if (count == 1) {
  88.                 defer.resolve();
  89.                 return;
  90.             }
  91.             count--;
  92.         };
  93.         doorLeft.transition({
  94.             'left': left
  95.         }, time, complete);
  96.  
  97.         //?
  98.  
  99.          return defer;
  100.     }
  101.  
  102.     // 开门
  103.     function openDoor() {
  104.         return doorAction('-50%', '100%', 2000);
  105.     }
  106.  
  107.     // 关门
  108.     function shutDoor() {
  109.         return doorAction('0%', '50%', 2000);
  110.     }
  111.  
  112.  
  113.     // 开门
  114.     $("button:first").click(function() {
  115.         openDoor();
  116.     });
  117.  
  118.     // 关门
  119.     $("button:last").click(function() {
  120.         shutDoor();
  121.     });
  122.  
  123.  
  124. })
  125. </script>
  126.  
  127. </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.  
  6.    ol,
  7.    ul,
  8.    li {
  9.        list-style-type: none;
  10.    }
  11.    /*主体部分*/
  12.  
  13.    #content {
  14.        width: 100%;
  15.        height: 100%;
  16.        /* top: 20%; */
  17.        overflow: hidden;
  18.        position: absolute;
  19.    }
  20.  
  21.    .content-wrap {
  22.        position: relative;
  23.    }
  24.  
  25.    .content-wrap > li {
  26.        background: #CAE1FF;
  27.        color: red;
  28.        float: left;
  29.        overflow: hidden;
  30.        position: relative;
  31.    }
  32.  
  33.    li:nth-child(2) {
  34.        background: #9BCD9B;
  35.    }
  36.  
  37.    li:nth-child(3) {
  38.        background: yellow;
  39.    }
  40.  
  41.     button {
  42.         width: 80px;
  43.         height: 50px;
  44.     }
  45.  
  46.     .button {
  47.         position: absolute;
  48.         bottom:0 ;
  49.     }
  50.  
  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.  
  36. .pauseWalk {
  37.     animation-play-state: paused;
  38. }
  39. /*-------- 太阳自转以及动画 --------*/
  40.  
  41. #sun {
  42.     background: url("http://img1.sycdn.imooc.com//55ade004000106c202010201.png") no-repeat;
  43.     position: absolute;
  44.     z-index: 1;
  45.     top: -30px;
  46.     height: 201px;
  47.     width: 201px;
  48.     right: 40%;
  49. }
  50.  
  51. .rotation {
  52.     -webkit-animation-name: rotation;
  53.     -webkit-animation-duration: 30s;
  54.     -webkit-animation-iteration: 1;
  55.     -moz-animation-name: rotation;
  56.     -moz-animation-duration: 30s;
  57.     -moz-animation-iteration: 1;
  58. }
  59.  
  60. @-webkit-keyframes rotation {
  61.     0% {
  62.         transform: translateX(0) translateY(0);
  63.     }
  64.     100% {
  65.         transform: translateX(-2000px) translateY(400px);
  66.     }
  67. }
  68.  
  69. @-moz-keyframes rotation {
  70.     0% {
  71.         transform: translateX(0) translateY(0);
  72.     }
  73.     100% {
  74.         transform: translateX(-2000px) translateY(400px);
  75.     }
  76. }
  77. /*天空云*/
  78.  
  79. .cloud {
  80.     z-index: 2;
  81.     position: absolute;
  82. }
  83.  
  84. .cloud1 {
  85.     width: 20%;
  86.     height: 30%;
  87.     left: -5%;
  88.     top: 15%;
  89.     background: url("http://img1.sycdn.imooc.com//55addfde0001aec501810101.png") no-repeat;
  90.     -webkit-animation-name: smallCloud;
  91.     -webkit-animation-duration: 30s;
  92.     -webkit-animation-iteration: infinite;
  93.     -moz-animation-name: smallCloud;
  94.     -moz-animation-duration: 30s;
  95.     -moz-animation-iteration: infinite
  96. }
  97.  
  98. .cloud2 {
  99.     width: 20%;
  100.     height: 30%;
  101.     right: -5%;
  102.     background: url("http://img1.sycdn.imooc.com//55addff500016df503010140.png") no-repeat;
  103.     -webkit-animation-name: largeCloud;
  104.     -webkit-animation-duration: 60s;
  105.     -webkit-animation-iteration: infinite;
  106.     -moz-animation-name: largeCloud;
  107.     -moz-animation-duration: 60s;
  108.     -moz-animation-iteration: infinite;
  109. }
  110.  
  111. @-webkit-keyframes smallCloud {
  112.     0% {
  113.         left: -5%;
  114.     }
  115.     100% {
  116.         left: 100%;
  117.     }
  118. }
  119.  
  120. @-moz-keyframes smallCloud {
  121.     0% {
  122.         left: -5%;
  123.     }
  124.     100% {
  125.         left: 100%;
  126.     }
  127. }
  128.  
  129. @-webkit-keyframes largeCloud {
  130.     0% {
  131.         right: -5%;
  132.     }
  133.     100% {
  134.         right: 100%;
  135.     }
  136. }
  137.  
  138. @-moz-keyframes largeCloud {
  139.     0% {
  140.         right: -5%;
  141.     }
  142.     100% {
  143.         right: 100%;
  144.     }
  145. }
  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. }
下一节