javascript - 如何使用 jQuery 为 CSS 精灵设置动画

Question

我试图找到使用 CSS sprites 和 jQuery 复制 12fps 动画的最简单方法。

我在考虑使用 setInterval() 所以每 83.33 毫秒，下一个精灵将被加载。

我的问题是我不知道该怎么做...

我在想，因为我的精灵名称是递增的，例如：

mariohammerswing1.png 
mariohammerswing2.png 
mariohammerswing3.png
etc.

所以，如果我们能以某种方式增加这个直到我们到达最后一个实例，在这种情况下mariohammerswing5.png它会循环回到开头。

如果我能弄清楚那部分，我准备好了！:)

有什么建议么？

Answer 1

jquery 有一个 sprite-dedicated 插件

http://www.spritely.net/

看一看 ;）

Answer 2

未经测试，但类似这样：

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

您可能会%以某种方式对 (modulo) 应用一些技巧，但我认为这样更容易阅读。