如何使用 jQuery 制作 CSS 精灵动画

发布于 2024-09-13 15:41:14 字数 395 浏览 2 评论 0原文

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

我正在考虑使用 setInterval() 因此每 83.33 毫秒就会加载下一个精灵。

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

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

mariohammerswing1.png 
mariohammerswing2.png 
mariohammerswing3.png
etc.

所以，如果我们可以以某种方式递增它，直到到达最后一个实例，在本例中是 < code>mariohammerswing5.png 它将循环回到开头。

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

有什么建议吗？

原文

I am trying to find the simplest way to replicate a 12fps animation using CSS sprites and jQuery.

I was thinking using the setInterval() so every 83.33 millisecond, the next sprite will be loaded.

My problem, is that I don't know how to do that...

I was thinking, because my sprite names are incremental like:

mariohammerswing1.png 
mariohammerswing2.png 
mariohammerswing3.png
etc.

So, if we could somehow increment this until we reached the last instance, which in this case is mariohammerswing5.png it will loop back to the beginning.

If I can figure out that part, I'm ready to go! :)

Any suggestions?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

没企图 2024-09-20 15:41:14

有一个专门用于 jquery 的 sprite 插件

http://www.spritely.net/

看看吧；）

回复收藏 0 原文

月亮邮递员 2024-09-20 15:41:14

未经测试，但类似这样：

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

您可能可以以某种方式使用 % （模）应用一些技巧，但我认为这种方式更容易阅读。

Untested, but something like this:

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

You could probably apply some trickery with % (modulo) somehow, but I think it's easier to read this way.

回复收藏 0 原文

~没有更多了~