javascript - 如何在 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);
    }); 
});

但是现在我想代替图像来播放精灵表，这可能吗？还是我必须更改整个代码，是吗？有人可以帮我吗？

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-positionspritesheet 中显示其他图像的方式。

检查这个spritecow，一个在线工具（我最喜欢的）来获取background-positionspritesheet 中的单个图像。