写入图像动画（交换图片）与jQuery

我试图任意动画使用jQuery和计时器（http://jquery.offput.ca/every/作品定时器）图像，以便模拟一个GIF动画，但允许动画到HTML文件中被定义（或者在页面顶部的脚本中重复使用相同的“动画”图像）。写入图像动画（交换图片）与jQuery

我已经写了一个特定的版本，其中的帧是固定的：下面的代码将交换图像与一类“动画”与/path/to/image/dir/frame1.png和/路径/到/ image/dir/frame2.png每300毫秒。

<script type="text/javascript" src="jquery.timers.js"></script> 
<script type="text/javascript"> 
    ;(function($){ 
     $(function() { 
      var base_path = "/path/to/image/dir/"; 
      var on = true; 
      $(".animate").everyTime(200, function(i) { 
       if(!on) { 
        $(this).attr({src: base_path + "frame1.png"}); 
       } else { 
        $(this).attr({src: base_path + "frame2.png"}); 
       } 
        on = !on; 
       }); 
      }); 
     })(jQuery); 
</script>

我希望做的是上面写，在图像标签，我可以把下面的

<img src="/path/to/fallback/image.png" class="animate {interval:300, src:[frame1.png,frame2.png]}" alt="animated image" />

和的一般形式的脚本可以使用传入的参数class属性来确定每个帧和源图像的持续时间。最初，我只想在两张图像之间交替，但理想情况下，我希望让src数组包含无限循环（即不需要用户交互）的任意数量的图像。

任何想法如何我会实现这个？我猜测我需要某种形式的类属性的键值解析，这可能在语义上不正确，那么是否有另一个（有效但很少使用的）属性可以用来存储动画属性？

来源

2010-09-20 Robbie

它看起来像什么你基本上试图做的是创建一个新的jQuery插件。

为了存储动画的元数据中，jQuery metadata plugin已经做你想要什么，它支持无级存储位置。

这里有一个plugin design pattern包括集成元数据插件的说明。

我的建议是返工的事情，这样，与示例类的属性，您可以为当前页面所有情况下的动画用一个简单的$('img.animate').myAnimationPlugin();（当然，具有更加鲜明的名字）

来源

2010-09-20 06:32:46 ssokolow

谢谢，这是我一直在寻找。数据集插件允许我使用对这类脚本更有用的html5数据属性 – Robbie 2010-09-22 03:50:12

为什么不使用一些图像滑块插件是这样的：http://nivo.dev7studios.com/

您可以将图像切换动画设置为淡入淡出。

来源

2010-09-20 14:01:45

写入图像动画（交换图片）与jQuery

回答

相关问题