开始的动画调来调去还是卡卡的，不是前面卡，就是后面卡，为了后面的连贯性，只能前面卡了。
布局与主要实现思路
<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
