0

こんにちは、私はすでにこのコードを持っています:

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);
    }); 
});

しかし、画像の代わりにスプライトシートを再生したいのですが、これは可能ですか? または、コード全体を変更する必要がありますか? 誰かがそれで私を助けることができますか?

4

1 に答える 1

2

スプライト シートは基本的に、1 つ (または複数) のアニメーション シーケンスを表す一連の画像を含む画像ファイルです。

例:

#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、スプライトシートで他の画像の表示を変更します。

スプライトシート内の個々の画像を取得するためのオンラインツール（私のお気に入り）であるこのspritecowを確認してください。background-position

于 2013-10-14T14:24:41.733 に答える