我想从静态图像创建动画图像,然后将其放入<div>,就像Facebook贴纸一样。

这是图像演示:

javascript - 如何自动计算“背景位置”中的像素?-LMLPHP

有17个土耳其人。我想一下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);
});

最佳答案

这可能会有所帮助:0%将图像放在左/上,而100%将图像放在右/下。

考虑到这一点,由于您有五帧,所以只需除以四:0%, 25%, 50%, 75%, 100%

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

请记住,保存帧号并进行修改,然后从中计算xy可能更容易。

关于javascript - 如何自动计算“背景位置”中的像素?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33483364/

10-12 12:57
查看更多