使用 jQuery 编写图像动画（交换图像）
我正在尝试使用 jQuery 和计时器对图像进行任意动画处理（http://jquery.offput.ca/every / 用作计时器），以便模拟动画 GIF，但允许在 HTML 文件中定义动画（或在页面顶部的脚本中定义，以重复使用相同的“动画”图像） 。
我编写了一个固定框架的特定版本：以下代码将用 /path/to/image/dir/frame1.png 和 /path/to/ 的“animate”类交换图像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" />
，并且脚本可以使用传递到类属性中的参数来确定每个帧和源图像的持续时间。最初我只想在两个图像之间交替，但理想情况下我想让 src 数组包含任意数量的图像，这些图像将无限循环（即不需要用户交互）。
我有什么想法可以实现这个吗？我猜我需要对类属性进行某种形式的键值解析，这在语义上可能不正确，那么是否还有另一个（有效但很少使用）属性可以用来存储动画属性？
I'm trying to arbitrarily animate images using jQuery and a timer (http://jquery.offput.ca/every/ works as the timer) so as to simulate an animated GIF but allow the animation to be defined within the HTML file (or in a script at the top of the page for repeated use of the same "animated" image).
I've written a specific version in which the frames are fixed: the following code will swap the image(s) with a class of "animate" with /path/to/image/dir/frame1.png and /path/to/image/dir/frame2.png every 300 ms.
<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>
What I'd like to do is write a generic form of the above, where in an image tag I could put the following
<img src="/path/to/fallback/image.png" class="animate {interval:300, src:[frame1.png,frame2.png]}" alt="animated image" />
and the script could use the parameters passed into the class attribute to determine the duration of each frame and the source image. Initially I only want to alternate between two images, but ideally I'd like to make the src array contain any number of images that would be looped endlessly (i.e. no need for user interaction).
Any ideas how I might implement this? I'm guessing I'm going to need some form of key-value parsing of the class attribute, which may not be semantically correct, so is there another (valid but seldom used) attribute I could use to store the animation properties?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
看起来您基本上想做的是创建一个新的 jQuery 插件。
为了存储动画元数据， jQuery 元数据插件 已经完成了您想要的操作，并且它确实支持非级存储位置。
这是一个插件设计模式，其中包含集成元数据的说明插件。
我的建议是重新设计一些东西，以便使用该示例类属性，您可以使用简单的
$('img.animate').myAnimationPlugin();(当然，还有一个更有特色的名字）It looks like what you're basically trying to do is create a new jQuery plugin.
For storing the animation metadata, the jQuery metadata plugin already does what you want and it does support non-class storage locations.
Here's a plugin design pattern that includes instructions for integrating the metadata plugin.
My suggestion is to rework things so that, with that example class attribute, you can enable animation for all cases in the current page with a simple
$('img.animate').myAnimationPlugin();(Naturally, with a more distinctive name)为什么不使用像这样的图像滑块插件： http://nivo.dev7studios.com/
你可以设置图像切换动画淡入淡出。
Why not use some image slider plugin like this: http://nivo.dev7studios.com/
You can set the image switching animation to fade.