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是一张工作表基本上是一个包含一堆图像的图像文件，代表一个（或几个）动画序列。

For example：

#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。

如何在JavaScript中使用精灵表？

1 个答案: