Question

我正在尝试使用jQuery和计时器（http://jquery.offput.ca/every/作为计时器）任意动画图像，以便模拟动画GIF，但允许在HTML文件中（或在脚本中）定义动画在页面顶部重复使用相同的“动画”图像）。

我已经编写了一个修复框架的特定版本：以下代码将使用/path/to/image/dir/frame1.png和/ path将图像与“animate”类交换/to/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数组包含任意数量的无限循环的图像（即不需要用户交互）。

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

Answer 1

看起来你基本上要做的就是创建一个新的jQuery插件。

为了存储动画元数据，jQuery metadata plugin已经做了你想要的，它确实支持非类存储位置。

这是一个plugin design pattern，其中包含有关集成元数据插件的说明。

我的建议是重做工作，以便通过该示例类属性，您可以使用简单的$('img.animate').myAnimationPlugin();（当然，具有更独特的名称）为当前页面中的所有案例启用动画

Answer 2

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

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

用jQuery编写图像动画（交换图像）

2 个答案: