5

我有一个 .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

4

3 回答 3

6

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

所以默认情况下，不可能说 GIF 应该播放的时间或多长时间。

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

于 2013-06-13T12:10:25.643 回答
1

您需要将图像从 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 图像，因为它的末尾会附加一个不同的数字.

于 2013-06-13T12:03:06.073 回答
0

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

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

于 2013-06-13T11:56:49.037 回答