Javascript 如何自动计算“背景位置”中的像素？

我想从静态图像创建一个动画图像，并将其放入像Facebook贴纸一样的

以下是图像演示：

有17个图兹基人。我考虑

背景位置

一次拆分1个tuzki，并使用

设置间隔

显示

下一个

tuzki，如下所示：

 <style>
.preview {
   background-image: url("http://googledrive.com/host/0B-UH4_eX_YisdlJ4cU9qZ1lwM3c/Tuzki1.png"); 
   background-size: 380px 304px; 
   height: 64px; 
   width: 64px; 
   background-position: -6px -6px;
}
</style>
<div class="preview"></div>

---

这里有一个想法可能会有所帮助：

0%

将图像放在左/上，而

100%

将图像放在右/下

记住这一点，因为您有五个帧，所以只需除以四：

0%、25%、50%、75%、100%

现在，您已经拥有了完美定位的帧。对于垂直位置应用类似的原理（<代码> 0%、33%、67%、100% < /代码> -考虑添加空行，以便再次使用0～25-50-75-100），并且不再需要担心像素大小。

---

请记住，保存帧数并修改它，然后从中计算xy可能更容易。

您是否尝试过动画步骤-听起来像

从百分比中获取像素。第一个Tuzki宽度=（图像宽度*0.2），高度=（图像高度*0.25）。这是对的吗？为了完整起见，如果你能做到这一点，请发布一个工作示例。
$('.preview').hover(function(){
   setInterval(function(){
      var pos = $('.preview').css('backgroundPosition').split(' ');
      var xPos = parseInt(pos[0].split('px')[0]); // get x position
      var yPos = parseInt(pos[1].split('px')[0]); // get y position

      //do something to get next tuzki: xPos and yPos

      $('.preview').css('background-position', xPos + 'px ' + yPos + 'px');
   }, 100);
});