如何在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 。