如何使用jQuery（通过滚动或触发动画）为PNG序列设置动画效果

Question

我越来越多地看到png被加载到一系列DIV（或一个div）中的效果，然后基于按钮点击或基于滚动逐帧排序。我试图查看代码，我知道javascript正在做繁重的工作，但我仍然有点迷失，有没有关于这种技术的教程？实例

动画示例（多个div） http://atanaiplus.cz/index_en.html：

动画示例（一个div）： http://www.hyundai-veloster.eu/

滚动动画示例： http://discover.store.sony.com/tablet/#design/ergonomics

Answer 1

您只想使用setInterval计时器替换src属性

var myAnim = setInterval(function(){
  $(".myImageHolder").attr('src', nextImage);
}, 42);

技巧是如何生成nextImage。这在很大程度上取决于图像的命名约定，或者您希望动画在

中运行的方向

<强>更新

或使用plugin

Answer 2

也许不是在不同的图像之间切换，而是使用此问题中描述的spriting技术：How to show animated image from PNG image using javascript? [ like gmail ]