1

CSSスプライトとjQueryを使用して12fpsアニメーションを複製する最も簡単な方法を見つけようとしています。

setInterval（）を使用することを考えていたので、83.33ミリ秒ごとに、次のスプライトがロードされます。

私の問題は、それを行う方法がわからないということです...

私のスプライト名は次のように増分的であるため、私は考えていました。

mariohammerswing1.png 
mariohammerswing2.png 
mariohammerswing3.png
etc.

したがって、最後のインスタンスに到達するまでこれを何らかの方法でインクリメントできれば、この場合はmariohammerswing5.png最初にループバックします。

その部分がわかれば、準備はいいです！:)

助言がありますか？

4

2 に答える 2

5

jquery用のスプライト専用プラグインがあります

http://www.spritely.net/

見てください;）

于 2010-08-07T08:11:14.550 に答える
3

テストされていませんが、次のようなものです。

var images = ['one.png', 'two.png', 'three.ng'];

function startAnim() {
    var $target = $('#something');
    var counter = 0;
    setTimeout(function () {
        $target.css('background-image', images[counter]);
        if (++counter > images.length - 1)
            counter = 0;
    }, 83);
}

startAnim();

どういうわけか（モジュロ）を使っていくつかのトリックを適用することもできますが%、この方法の方が読みやすいと思います。

于 2010-08-07T04:17:24.537 に答える