如何在JavaScript中使用精灵表？

Question

嗨，我已经有了这段代码：

var refreshIntervalId;
var myImages = [
    "walking1.jpg",
    "walking2.jpg",
    "walking3.jpg",
    "walking4.jpg",
    "walking5.jpg",

];
var counter = 0;  


function switchImage() {
    $('#myImage').attr('src', myImages[counter]);
    counter += 1;

    if (counter == Number($("#counter").val())) {
        counter = 0;
        clearInterval(refreshIntervalId);



    }
}
$(document).ready(function() {
    $("#animationBtn").click(function(){
        refreshIntervalId = setInterval(switchImage, 50);
    }); 
});

但是现在我想要而不是图像来播放spritesheet，这可能吗？ 或者我必须更改整个代码，是吗？ 有人可以帮助我吗？

Answer 1

spritesheet是一张工作表基本上是一个带有一堆图像的图像文件，代表一个（或几个）动画序列。

例如 ：

#nav li a {background-image:url('../img/image_nav.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}

加载图像一次，并通过更改background-position显示spritesheet中的其他图像。

检查这个spritecow ，一个在线工具（我最喜欢的），以获得spritesheet中单个图像的background-position 。