開始的動畫調(diào)來調(diào)去還是卡卡的，不是前面卡窗悯，就是后面卡，為了后面的連貫性偷拔，只能前面卡了蒋院。
布局與主要實現(xiàn)思路
<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設(shè)置兩個不同的背景莲绰，默認第二個div的背景會掉覆蓋第一個的欺旧，可以設(shè)置第二個div的背景顏色為透明，這樣就能實現(xiàn)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，正好每個格子對應(yīng)一個騎馬的動作戳晌，所以每兩個騎馬動作的間距就是67px鲫尊。
用setInterval不停的調(diào)用這個css，讓它從第一個動作跳到第二個動作躬厌，第二個跳到第三個马昨，跳到第七個后又回到第一個竞帽，不停的循環(huán)扛施。
setInterval執(zhí)行的越快，馬就跑的越快
再來說說過場動畫的事屹篓，由于馬不是一下子跑起來的疙渣，所以在最開始加個過場，讓它由慢到快堆巧，也是改變background-positionX的值妄荔。
由于setInterval()是后執(zhí)行函數(shù)泼菌，把動畫放到它的后面，效果會連貫一些啦租，不然中間會卡60ms
