用昨天课上的知识实现简单的骑马动画

最终效果Demo

开始的动画调来调去还是卡卡的，不是前面卡，就是后面卡，为了后面的连贯性，只能前面卡了。

布局与主要实现思路

<div class="box">
    <div class="w"></div>
    <input type="button" value="start" class="btn">
<div>

.box{
  width:469px;
  height: 162px;
  background: url(http://i12.tietuku.com/2fa0e7f78bb8b3cf.jpg);
  position: relative;
  margin: 0 auto;
}
.w{
  background: url(http://i12.tietuku.com/995f13586cedf770.png) transparent;
  height: 100%;
}
.btn{
  position: absolute;
  left: 50%;
  bottom: -25px;
  width: 100px;
  margin-left: -50px;
}

其实很简单，就是两个div设置两个不同的背景，默认第二个div的背景会掉覆盖第一个的，可以设置第二个div的背景颜色为透明，这样就能实现Demo中的效果

不说那个坑爹的过场动画，先看怎么样让马跑起来

setInterval(function(){
    var num=0;
    $('.box').css({
        'background-positionX': '+=67'
    });
    num++;
    if(num==7){
        num=0;
        $('.box').css({
            'background-positionX': 0
        });
    }
},60);

不停改变box的background-positionX,让它每次跳动67px，为什么是67px，因为格子图片的宽度是469px，每行7个格子，每个格子的宽度就是67px，正好每个格子对应一个骑马的动作，所以每两个骑马动作的间距就是67px。

用setInterval不停的调用这个css，让它从第一个动作跳到第二个动作，第二个跳到第三个，跳到第七个后又回到第一个，不停的循环。

setInterval执行的越快，马就跑的越快

再来说说过场动画的事，由于马不是一下子跑起来的，所以在最开始加个过场，让它由慢到快，也是改变background-positionX的值。

由于setInterval()是后执行函数，把动画放到它的后面，效果会连贯一些，不然中间会卡60ms