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
Is it possible to pause a .gif image?
提问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点击演示

