4-3 页面与人物之间形成的视觉差效果
本节编程练习不计算学习进度，请电脑登录imooc.com操作

页面与人物之间形成的视觉差效果

最核心的2个部分，页面与人物的一些知识点都以及分解过了，包括代码都封装好了,接下来开始一些逻辑上的处理了

以小男孩走路变化，页面就跟着变化，两个元素用不同的速率变化就会产生视觉差的效果，感觉人物就是走了几个页面

其中需要注意

注意以上这两点主要是为了设置比例的问题

具体实现我们看下右边的代码区域：

采用接口编程的方式这里就体现出来了，当小男孩走完第一段路的时候，调用页面接口让页面开始滚动，之后通过boy.walkTo继续让小男孩走路，我们只需要给小男孩与页面设置同样的位置与时间，那么他们内部都会自己去计算，调用者只需要调用 scrollTo(5000, 1) 传递一下时间与页面比例，页面就会自动的滚动到指定的区域，我们也不需要关心具体的实现细节了，这就是面向接口编程的好处

任务

打开index.html文件，在代码的60行填入相应代码，可以观察到页面滚动，产生视觉差效果

scrollTo(5000, 1);
index.htmlBoyWalk.jsSwipe.jsstyle.csspageA.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.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  10.     <script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
  11.     <script type="text/javascript" src="Swipe.js"></script>
  12.     <script type="text/javascript" src="BoyWalk.js"></script>
  13. </head>
  14.  
  15. <body>
  16.     <div id='content'>
  17.         <ul class='content-wrap'>
  18.             <li>
  19.                 <div class="a_background">
  20.                     <div class="a_background_top"></div>
  21.                     <div class="a_background_middle"></div>
  22.                     <div class="a_background_botton"></div>
  23.                 </div>
  24.             </li>
  25.             <li> 页面2 </li>
  26.             <li> 页面3 </li>
  27.         </ul>
  28.         <div id="boy" class="charector"></div>
  29.     </div>
  30.     <div class="button">
  31.         <button>开始</button>
  32.     </div>
  33. </body>
  34. <script type="text/javascript">
  35.     $(function() {
  36.  
  37.         var container = $("#content");
  38.         var swipe = Swipe(container);
  39.         // 页面滚动到指定的位置
  40.         function scrollTo(time, proportionX) {
  41.             var distX = container.width() * proportionX;
  42.             swipe.scrollTo(distX, time);
  43.         }
  44.  
  45.         ////////////////////////////////////////////////////////
  46.         //=================== 动画处理 =======================//
  47.         ////////////////////////////////////////////////////////
  48.  
  49.         var boy = BoyWalk();
  50.  
  51.         // 开始
  52.         $("button:first").click(function() {
  53.  
  54.  
  55.             // 开始第一次走路
  56.             boy.walkTo(2000, 0.2)
  57.                 .then(function() {
  58.                     // 第一次走路完成
  59.                     // 开始页面滚动
  60.                     //?
  61.                 }).then(function() {
  62.                     // 第二次走路
  63.                     return boy.walkTo(5000, 0.5);
  64.                 });
  65.         });
  66.  
  67.     })
  68. </script>
  69.  
  70. </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.     var $boy = $("#boy");
  27.     var boyWidth = $boy.width();
  28.     var boyHeight = $boy.height();
  29.     // 修正小男孩的正确位置
  30.     $boy.css({
  31.         top: pathY - boyHeight + 25
  32.     });
  33.  
  34.     // 暂停走路
  35.     function pauseWalk() {
  36.         $boy.addClass('pauseWalk');
  37.     }
  38.  
  39.     // 恢复走路
  40.     function restoreWalk() {
  41.         $boy.removeClass('pauseWalk');
  42.     }
  43.  
  44.     // css3的动作变化
  45.     function slowWalk() {
  46.         $boy.addClass('slowWalk');
  47.     }
  48.  
  49.     // 用transition做运动
  50.     function stratRun(options, runTime) {
  51.         var dfdPlay = $.Deferred();
  52.         // 恢复走路
  53.         restoreWalk();
  54.         // 运动的属性
  55.         $boy.transition(
  56.             options,
  57.             runTime,
  58.             'linear',
  59.             function() {
  60.                 dfdPlay.resolve(); // 动画完成
  61.             });
  62.         return dfdPlay;
  63.     }
  64.  
  65.     // 开始走路
  66.     function walkRun(time, dist, disY) {
  67.         time = time || 3000;
  68.         // 脚动作
  69.         slowWalk();
  70.         // 开始走路
  71.         var d1 = stratRun({
  72.             'left': dist + 'px',
  73.             'top': disY ? disY : undefined
  74.         }, time);
  75.         return d1;
  76.     }
  77.  
  78.     // 计算移动距离
  79.     function calculateDist(direction, proportion) {
  80.         return (direction == "x" ?
  81.             visualWidth : visualHeight) * proportion;
  82.     }
  83.  
  84.     return {
  85.         // 开始走路
  86.         walkTo: function(time, proportionX, proportionY) {
  87.             var distX = calculateDist('x', proportionX);
  88.             var distY = calculateDist('y', proportionY);
  89.             return walkRun(time, distX, distY);
  90.         },
  91.         // 停止走路
  92.         stopWalk: function() {
  93.             pauseWalk();
  94.         },
  95.         setColoer:function(value){
  96.             $boy.css('background-color',value);
  97.         }
  98.     }
  99. }
  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.    a {
  42.        position: absolute;
  43.        top: 50%;
  44.        left: 40%;
  45.    }
  46.  
  47.    .charector {
  48.        background: url(http://img.mukewang.com/55ade248000198ae10550582.png) -0px -291px no-repeat;
  49.        width: 151px;
  50.        height: 291px;
  51.        position: absolute;
  52.        left: 0%;
  53.        top: 55%;
  54.    }
  55.  
  56.    .slowWalk {
  57.        -webkit-animation-name: person-slow;
  58.        -webkit-animation-duration: 950ms;
  59.        -webkit-animation-iteration-count: infinite;
  60.        -webkit-animation-timing-function: steps(1, start);
  61.        -moz-animation-name: person-slow;
  62.        -moz-animation-duration: 950ms;
  63.        -moz-animation-iteration-count: infinite;
  64.        -moz-animation-timing-function: steps(1, start)
  65.    }
  66.    /*普通慢走*/
  67.  
  68.    @-webkit-keyframes person-slow {
  69.        0% {
  70.            background-position: -0px -291px;
  71.        }
  72.        25% {
  73.            background-position: -602px -0px;
  74.        }
  75.        50% {
  76.            background-position: -302px -291px;
  77.        }
  78.        75% {
  79.            background-position: -151px -291px;
  80.        }
  81.        100% {
  82.            background-position: -0px -291px;
  83.        }
  84.    }
  85.  
  86.    @-moz-keyframes person-slow {
  87.        0% {
  88.            background-position: -0px -291px;
  89.        }
  90.        25% {
  91.            background-position: -602px -0px;
  92.        }
  93.        50% {
  94.            background-position: -302px -291px;
  95.        }
  96.        75% {
  97.            background-position: -151px -291px;
  98.        }
  99.        100% {
  100.            background-position: -0px -291px;
  101.        }
  102.    }
  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. }
  30.  
  31.     button {
  32.         width: 80px;
  33.         height: 50px;
  34.     }
  35.  
  36.     .button {
  37.         position: absolute;
  38.         bottom: 0;
  39.     }
  40.     /*人物暂停*/
  41.  
  42.     .pauseWalk {
  43.         animation-play-state: paused;
  44.     }
下一节