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

Question

我想从静态图片创建一个动画图像并将其放入<div>，就像Facebook贴纸一样。

以下是图片演示：

有17个tuzkies。我想一次background-position到拆分 1 tuzki并使用setInterval显示next 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>

所以，background-position: -6px -6px是第一个tuzki。我的问题是：如何获得第二个，第三个... tuzki（以像素为单位）？

$('.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);
});

Answer 1

以下可能会有所帮助：0%将图片放在左侧/顶部，100%将图片放在右侧/底部。

考虑到这一点，因为你有五个框架，只需要除以四：0%, 25%, 50%, 75%, 100%

您现在拥有完美定位的框架。对垂直位置应用类似的原则（0%, 33%, 67%, 100% - 考虑添加一个空行，以便再次使用0-25-50-75-100）并且您不必再担心像素大小了

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