html css Gif 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17086354/
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
html css Gif Animation
提问by LeSam
I have a .gif playing the animation once. It's doesn't loop and I don't want it to loop.
我有一个 .gif 播放动画一次。它不循环，我不希望它循环。
I have 2 images, ("1 png" and "1 gif animated")
我有 2 张图片，（“1 png”和“1 gif 动画”）
I want that every time when the mouse is over the png image, the gif plays.
我希望每次鼠标悬停在 png 图像上时，都会播放 gif。
My problem is that when I set my mouse positon over the png Image, the gif play one time and stop. When I move the mouse away and then move it back over the image, it doesn't play anymore.
我的问题是，当我将鼠标位置设置在 png 图像上时，gif 播放一次并停止。当我将鼠标移开然后将其移回图像上时，它不再播放。
My CSS codes :
我的 CSS 代码：
#icon{
float: left;
width:50px;
height:50px;
background: url("images/smal_icon.png") no-repeat scroll 0% 0% transparent;
}
#icon:hover{
float: left;
width:50px;
height:50px;
background: url("images/smal_icon.gif") no-repeat scroll 0% 0% transparent;
}
#iconis a DIV
#icon是一个 DIV
采纳答案by Willem Mulder
By default, you can't control the GIF's looping or animation. The browser will just play the GIF as is.
默认情况下，您无法控制 GIF 的循环播放或动画。浏览器将按原样播放 GIF。
So by default, it is impossible to say whén or how long the GIF should play.
因此，默认情况下，无法确定 GIF 应何时播放或播放多长时间。
There are three solutions:
1. You replace the src of the img with a data:imageso you inline the GIF. Whenever the src changes, the GIF will play again. Using the inline GIF instead of a real URL, there's no redownloading of the GIF, so that saves time. See http://www.websiteoptimization.com/speed/tweak/inline-images/for an example
2. Like said in the comments, and other answers, you can replace the src of the img tag with the same GIF but with an appendum to the URL (like ?someRandomNumber=1345) so that it will redownload the GIF and play it again. Downside is that the GIF will be redownloaded.
3. You use something like http://slbkbs.org/jsgif/to download the GIF via AJAX, then draw it using a canvas element, and have full control over it...
有三种解决方案：
1. 用 a 替换 img 的 src，data:image以便内联 GIF。每当 src 更改时，GIF 将再次播放。使用内嵌 GIF 而不是真实 URL，无需重新下载 GIF，从而节省时间。参见http://www.websiteoptimization.com/speed/tweak/inline-images/示例
2. 就像评论和其他答案中所说的那样，您可以使用相同的 GIF 替换 img 标签的 src，但使用一个附加到 URL（如 ?someRandomNumber=1345），以便它重新下载 GIF 并再次播放。缺点是 GIF 将被重新下载。
3. 你使用类似http://slbkbs.org/jsgif/ 的东西通过 AJAX 下载 GIF，然后使用画布元素绘制它，并完全控制它......
回答by Nick R
You'll need to take the image out of the CSS for this to work, and use img src=
您需要将图像从 CSS 中取出才能工作，并使用 img src=
But you could modify this:
但是你可以修改这个：
// hack for not caching .gifs in ff/chrome etc.
$("img").each( function( ) {
var src = $(this).attr("src");
if( /\.gif$/i.test(src)) {
$(this).attr( "src", src.replace( /\.gif$/, ".gif?rnd=" + Math.floor(Math.random() * 100) + 1));
}
});
What this does is
这是做什么的
- loops through all images on a page
- checks if it's a .gif changes the
- extension to add a random number on the en.
- 遍历页面上的所有图像
- 检查它是否是 .gif 更改
- 扩展名在 en 上添加一个随机数。
You could turn this into a function and strip out the bits you don't need, so that every time you hover over the png - it will request the .gif image again, because it would have a different number appended to the end of it.
你可以把它变成一个函数并去掉你不需要的位，这样每次你悬停在 png 上时 - 它会再次请求 .gif 图像，因为它会在它的末尾附加一个不同的数字.
回答by James Donnelly
Looping is a property of the GIF itself. The best way to do this would be to modify the GIF to allow the animation to endlessly loop. Most image editors which accept GIF animations have a "Loop" option which can be set to true.
循环是 GIF 本身的一个属性。最好的方法是修改 GIF 以允许动画无限循环。大多数接受 GIF 动画的图像编辑器都有一个“循环”选项，可以设置为 true。
Otherwise you can do this in a hacky way with JavaScript by reloading the image or re-firing the hover after a certain timeframe (see window.setInterval).
否则，您可以通过重新加载图像或在特定时间范围后重新触发悬停（请参阅 参考资料），使用 JavaScript 以一种hacky 方式执行此操作window.setInterval。
