jQuery图像旋转以复制动画gif [英] jQuery image rotate to replicate an animated gif

问题描述

我需要在jQuery中重新创建我拥有的动画gif，它将对图像进行排序并不断重复.

I need to recreate an animated gif that i own, in jQuery that would sequence through the images and repeat continuously.

所以我有这些图像

<img src="1.png" />
<img src="2.png" />
<img src="3.png" />
<img src="4.png" />

无需执行任何操作即可在页面开始时加载.

There is no action required it should load on page start.

这是如何实现的?

注意:我打算在移动设备上使用它，因此为什么我不只是直接调用gif.

note: i plan to use this on mobile devices, hence why i am not just calling the gif directly.

提前谢谢！ :)

推荐答案

Spritely 应该可以解决问题.例如，将四张图片，一张一张接一张地放在同一张图片中，以它们自己的100px宽部分为中心，使单个图片宽400px，然后:

Spritely should do the trick. For example, put the four images, one after another in the same image, centered on their own 100px wide section, making the single image 400px wide, then:

CSS

#sprite { width:100px; height:100px; background:#fff url('sprite.png') 0 0; }

JS

$('#sprite').sprite({fps: 12, no_of_frames: 4});

这篇关于jQuery图像旋转以复制动画gif的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！