html css Gif 动画答案

【问题标题】：html css Gif Animationhtml css Gif 动画
【发布时间】：2013-06-09 19:06:53
【问题描述】：

我有一个 .gif 动画播放一次。它不循环，我不希望它循环。

我有 2 张图片，（“1 png”和“1 gif 动画”）

我希望每次鼠标悬停在 png 图像上时，都会播放 gif。

我的问题是，当我将鼠标位置设置在 png 图像上时，gif 播放一次并停止。当我将鼠标移开然后将其移回图像上时，它不再播放了。

我的 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;
}

#icon 是一个 DIV

【问题讨论】：

因为它被设置为只播放一次，所以您可能想要做的是，当您将鼠标悬停在 png 上时，在 .gif 的末尾添加一些东西，所以 .gif?rnd=12334，这将确保gif 已重新下载并将再次动画。
@NickR 你能给我一个我有代码的例子吗（我已经编辑了我的帖子并输入了代码）
使用内嵌 GIF 制作即时动画，无需重新下载。

标签： html css animation

【解决方案1】：

循环是 GIF 本身的属性。最好的方法是修改 GIF 以允许动画无限循环。大多数接受 GIF 动画的图像编辑器都有一个“循环”选项，可以设置为 true。

否则，您可以使用 JavaScript 通过重新加载图像或在特定时间范围后重新触发悬停来以一种 hacky 方式执行此操作（请参阅window.setInterval）。

【讨论】：

@user2372006 在这种情况下，您需要使用 JavaScript 来检测 mouseover 事件并将元素的背景 style 设置为该图像，然后检测 mouseout 事件并恢复样式恢复默认。你在用jQuery吗？

【解决方案2】：

您需要将图片从 CSS 中取出才能正常工作，并使用 img src=

但是你可以修改这个：

// 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));
    }
});

这是做什么的

循环浏览页面上的所有图片
检查它是否是 .gif 更改
在 en 上添加随机数的扩展。

你可以把它变成一个函数并去掉你不需要的位，这样每次你将鼠标悬停在 png 上时，它都会再次请求 .gif 图像，因为它会有一个不同的数字附加到结束吧。

【讨论】：

对于src，您应该使用attr() 而不是prop()。 prop() 用于布尔值。
谢谢你，我希望这会奏效，我将其设置为“已解决”，但我现在无法尝试......无论如何谢谢你
这非常低效，因为每次播放时都需要重新下载 GIF。这会消耗带宽，并且在加载图像之前需要一些时间，因此您的 UX 永远不会是即时的。更好地使用内联 GIF，请参阅我的其他答案。
相关，他们使用了类似的解决方案 - stackoverflow.com/a/7669524/2470724 和 jsfiddle.net/64fZa/5

【解决方案3】：

默认情况下，您无法控制 GIF 的循环或动画。浏览器将按原样播放 GIF。

因此，默认情况下，无法确定 GIF 应该播放的时间或多长时间。

有三种解决方案：
1. 将 img 的 src 替换为 data:image，以便内联 GIF。每当 src 更改时，GIF 就会再次播放。使用内联 GIF 而不是真正的 URL，无需重新下载 GIF，从而节省时间。有关示例，请参阅 http://www.websiteoptimization.com/speed/tweak/inline-images/
2.就像在 cmets 和其他答案中所说的那样，您可以将 img 标签的 src 替换为相同的 GIF，但带有 URL 的附录（如？someRandomNumber = 1345），以便它重新下载 GIF 并再次播放.缺点是 GIF 将被重新下载。
3.你使用http://slbkbs.org/jsgif/之类的东西通过AJAX下载GIF，然后使用canvas元素绘制它，并完全控制它......

【讨论】：