Javascript 是否可以暂停 .gif 图像?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29661821/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 03:45:04  来源:igfitidea点击:

Is it possible to pause a .gif image?

javascriptjqueryhtmlcssgif

提问by wbjari

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.

是否可以在将鼠标悬停在 .gif 动画上时开始播放并在未悬停在其上时暂停?当停止悬停在图像上时,我不想将图像重置为其动画的开头。

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

编辑:感谢您的帮助,但没有像我想要的那样工作。我为此找到的最佳解决方案是:

HTML:

HTML:

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

JS:

JS:

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

So, just the resetting thingy.

所以,只是重置的东西。

回答by renakre

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

一种可能的解决方案是拥有两张图像,一张静止图片和一张动画 gif。然后,更改src悬停时间(如此处所述:https: //stackoverflow.com/a/5818049/1845408)。

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

还有一个插件,你可以用它来做这个: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/1845408Click for DEMO

但是,如果您真的要暂停动画,则可能需要拥有构建动画的图像集,并在鼠标悬停时按预设顺序在图像中移动,鼠标移开时暂停并记录最后暂停的图像。这是在这里实现的:https: //stackoverflow.com/a/20644622/1845408点击演示