是否可以暂停.gif图像? [英] Is it possible to pause a .gif image?

查看:459
本文介绍了是否可以暂停.gif图像?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当你将鼠标悬停在它上面并暂停它时,是否可以启动.gif动画?
编辑:感谢您的帮助,但是没有任何工作能像这样我想了。
我找到的最佳解决方案是这样的:
$ b HTML:

 < img id =gif1src =static1.jpg> 

JS:

 < code $(#gif1)。hover(
function(){
$(this).attr(src,animate1.gif);
} ,
function(){
$(this).attr(src,static1.jpg);
}
);

所以,只需重新设置一下。

解决方案

一种可能的解决方案是将两张图像放在一张静止图片和一张动画图片上。然后,在徘徊时更改 src (如此处所述: https:// stackoverflow .com / a / 5818049/1845408 )。

还有一个插件,您可以将其用于此目的: https://github.com/chrisantonellis/freezeframe



我想这个插件应用了上面描述的逻辑,只是更好。



然而,如果你真的想暂停动画,你可能需要有一组图像构建动画,并在鼠标悬停时按预设顺序移动图像,并在鼠标悬空时暂停并记录最后一张图像暂停。这是在这里实现的: https://stackoverflow.com/a/20644622/1845408 Click for DEMO


Is it possible to start the .gif animation when you hover over it and pause it when you're not hovering over it? I do not want to reset the image to the start of it's animation when stopping hovering over it.

EDIT: Thanks for the help, but nothing worked like I wanted. Best solution I found for this was this:

HTML:

<img id="gif1" src="static1.jpg">

JS:

$("#gif1").hover(
    function() {
        $(this).attr("src", "animate1.gif");
    },
    function() {
        $(this).attr("src", "static1.jpg");
    }                         
);  

So, just the resetting thingy.

解决方案

One possible solution would be having two images one still picture and one animated gif. Then, change the src when hovered (as desribed here: https://stackoverflow.com/a/5818049/1845408).

There is also plug-in then you can use this for this purpose: https://github.com/chrisantonellis/freezeframe

I guess this plug-in applies the logic described above, just more nicely.

However, if you really want to pause the animation, you may need to have the set of images that builds the animation, and move through the images in the preset order when mouseover, and pause when mouse is out and record the last image paused. This was implemented here: https://stackoverflow.com/a/20644622/1845408 Click for DEMO

这篇关于是否可以暂停.gif图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆