Question

我有一次播放动画的.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

Answer 1

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

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

有三种解决方案：
1.用data:image替换img的src，以便内联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，然后使用canvas元素绘制它，并完全控制它......

Answer 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图像，因为它会有一个不同的数字附加到结束了。

Answer 3

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

否则，您可以通过JavaScript重新加载图片或在特定时间范围后重新启动悬停，以hacky方式执行此操作（请参阅window.setInterval）。

html css Gif动画

3 个答案: