我想从静态图像创建动画图像,然后将其放入<div>
,就像Facebook贴纸一样。
这是图像演示:
有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/