I am developing a Twitter application which references to the images directly from Twitter. How can I prevent animated gifs from being played?
Using window.stop() at the end of the page does not work for me in Firefox.
Is there a better JavaScript hack? Preferable this should work for all browsers
我有一个包含大量GIF的页面.
<img src="gif/1303552574110.1.gif" alt="" >
<img src="gif/1302919192204.gif" alt="" >
<img src="gif/1303642234740.gif" alt="" >
<img src="gif/1303822879528.gif" alt="" >
<img src="gif/1303825584512.gif" alt="" >
我正在寻找什么
1页面加载=>停止所有GIF的动画
2在鼠标悬停时=>为该一个gif启动动画
3在mouseout =>动画再次停止该gif
我想这可以在Jquery中完成,但我不知道如何.
我正在尝试寻找一个代码示例,允许用户在鼠标悬停时为gif设置动画,并在鼠标移出时暂停.我看过很多关于这个的教程,但我想要一个不同的效果.
我注意到大多数GIF在鼠标移出时"重置".也就是说,要么用通用图像覆盖gif,要么动画回复到开头.我想要实现的是一个更加无缝的"暂停",它允许您在不使用占位符图像的情况下从中断的位置开始.与此页面上的示例类似:
http://www.valhead.com/2013/03/11/animation-play-state/
请注意,当您将鼠标放在图像上时,动画只是暂停而不替换任何内容,否则将重新开始.
我不知道是否可以使用gif,因为这个例子使用的是基本的CSS形状,但是必须有一些方法可以暂停鼠标上的gif并在鼠标上继续而不覆盖循环动画中的图像？如果没有,是否有办法使用暂停鼠标悬停的电影文件,并在将鼠标放在鼠标悬停时播放它停止的位置？
谢谢!
编辑:感谢@brbcoding和他的天才,这个问题解决了!有关解决方案的详细信息,请参阅以下帖子或其博客文章:http://codyhenshaw.com/blog/2013/12/17/faux-animated-gifs-with-css3-keyframes/