3-3 走路的实现
本节编程练习不计算学习进度，请电脑登录imooc.com操作

走路的实现

用精灵实现了人物脚步的变化，这样还不行，人物看起来还只是原地在踏步，如果要人物有走动的效果需要让人物坐标变化起来，3-2节介绍了让坐标变化的2种方式

这里采用修改坐标left的方式让人物变动，为什么不采用translate？ 其实都可以，做案例就尽可能的用不同的方法来实现。

这里采用了CSS3的transition来修改left的值，同样原理3-2节也介绍了，我们这里引入了一个插件jquery.transit，这个就是具体封装了transition的CSS3过渡动画的实现

接下来代码部分就非常简单了

transition的使用与jQuery提供的animate()方法基本差不多，所以使用上很容易接受

$boy.transition({
    'left': $("#content").width() + 'px',
}, 10000,'linear');

我们只要给出left的坐标值，同时给出变化的时间就让人物动了，结合一下精灵动画，是不是看起来人物走路在感觉就是那么回事了？

具体的实现看右边编辑区，通过点击开始走路按钮，实现人物走路效果

任务

打开index.html文件，在代码的61行填入相应代码，通过transition渐变的方式让人物走动

$boy.transition({
    'left': $("#content").width() + 'px',
}, 10000, 'linear', function() {});
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="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
  11.     <script type="text/javascript" src="Swipe.js"></script>
  12. </head>
  13. <style type="text/css">
  14.  
  15. </style>
  16.  
  17. <body>
  18.     <div id='content'>
  19.         <ul class='content-wrap'>
  20.             <li>
  21.                 <div class="a_background">
  22.                     <div class="a_background_top"></div>
  23.                     <div class="a_background_middle"></div>
  24.                     <div class="a_background_botton"></div>
  25.                 </div>
  26.             </li>
  27.             <li> 页面2 </li>
  28.             <li> 页面3 </li>
  29.         </ul>
  30.         <div id="boy" class="charector slowWalk"></div>
  31.         <div class="button">
  32.             <button>点击开始走路</button>
  33.         </div>
  34.     </div>
  35.     <script type="text/javascript">
  36.         var swipe = Swipe($("#content"));
  37.         // 获取数据
  38.         var getValue = function(className) {
  39.             var $elem = $('' + className + '')
  40.                 // 走路的路线坐标
  41.             return {
  42.                 height: $elem.height(),
  43.                 top: $elem.position().top
  44.             };
  45.         };
  46.         // 路的Y轴
  47.         var pathY = function() {
  48.             var data = getValue('.a_background_middle');
  49.             return data.top + data.height / 2;
  50.         }();
  51.         var $boy = $("#boy");
  52.         var boyHeight = $boy.height();
  53.         // 修正小男孩的正确位置
  54.         $boy.css({
  55.             top: pathY - boyHeight + 25
  56.         });
  57.  
  58.         // 绑定一个点击事件，开始走路
  59.         $("button").click(function() {
  60.             // left的变化
  61.             //?
  62.         });
  63.  
  64.     </script>
  65. </body>
  66.  
  67. </html>
  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.     button {
  47.         width: 100px;
  48.         height: 50px;
  49.     }
  50.  
  51.     .button {
  52.         position: absolute;
  53.         bottom: 0;
  54.     }
  55.    .charector {
  56.        left: 6%;
  57.        top: 55%;
  58.        position: absolute;
  59.        /* width: 100%;
  60.        height: 100%; */
  61.        width: 151px;
  62.        height: 291px;
  63.        background: url(http://img.mukewang.com/55ade248000198ae10550582.png) -0px -291px no-repeat;
  64.    }
  65.  
  66.    .slowWalk {
  67.        -webkit-animation-name: person-slow;
  68.        -webkit-animation-duration: 950ms;
  69.        -webkit-animation-iteration-count: infinite;
  70.        -webkit-animation-timing-function: steps(1, start);
  71.        -moz-animation-name: person-slow;
  72.        -moz-animation-duration: 950ms;
  73.        -moz-animation-iteration-count: infinite;
  74.        -moz-animation-timing-function: steps(1, start)
  75.    }
  76.    /*普通慢走*/
  77.  
  78.    @-webkit-keyframes person-slow {
  79.        0% {
  80.            background-position: -0px -291px;
  81.        }
  82.        25% {
  83.            background-position: -602px -0px;
  84.        }
  85.        50% {
  86.            background-position: -302px -291px;
  87.        }
  88.        75% {
  89.            background-position: -151px -291px;
  90.        }
  91.        100% {
  92.            background-position: -0px -291px;
  93.        }
  94.    }
  95.  
  96.    @-moz-keyframes person-slow {
  97.        0% {
  98.            background-position: -0px -291px;
  99.        }
  100.        25% {
  101.            background-position: -602px -0px;
  102.        }
  103.        50% {
  104.            background-position: -302px -291px;
  105.        }
  106.        75% {
  107.            background-position: -151px -291px;
  108.        }
  109.        100% {
  110.            background-position: -0px -291px;
  111.        }
  112.    }
  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. }
下一节