Question

在我的网站上，我有几个图像在鼠标悬停时循环播放GIF动画，并在鼠标离开图片时返回静态图像。

我希望gif在鼠标悬停时从第一帧播放。但是，如果我将鼠标悬停在图片上，将鼠标移开，然后再次悬停，图像将从最后一帧继续转到gif。

这是我的HTML代码：

devX

我的CSS：

<img id="menugif">

我很感激任何解决方案，包括Javascripts！谢谢大家:)

Answer 1

试试这个：

var img = document.getElementById('menugif');
img.addEventListener('mouseleave', function () {
    this.style.content = this.style.content;
}, false);

Answer 2

我认为this tutorial完全覆盖了你的情况，包括CSS和Javascript方面，即使你需要一些额外的库（jQuery和Font Awesome）。

Answer 3

这是一种解决问题的便宜方式，但为了解决这个问题我做了这个：

每个HTML gif都有自己的ID：

<a id="single_image1" href="#"><img id="menugifHulk" src="images\hulk.png"></a>

其中每一个都有自己的风格，如下：

#menugifHulk
        {
            padding-top: 15px;
            height: 115px;
            width: 125px;
            float: left;
        }

然后每个元素都有自己的JavaScript：

var img = document.getElementById('menugifHulk');
img.addEventListener('mouseleave', function () {
    var imageUrl = img.src;
    img.src = "";
    img.setAttribute('src', 'images/Hulk.png');
}, false);
img.addEventListener('mouseover', function () {
    img.setAttribute('src', 'images/Hulk.gif');
}, false);

java的功能如下：

function GifReset()
{
    var img = document.getElementById('menugifHulk');
    img.addEventListener('mouseleave', function () {
        var imageUrl = img.src;
        img.src = "";
        img.setAttribute('src', 'images/Hulk.png');
    }, false);
    img.addEventListener('mouseover', function () {
        img.setAttribute('src', 'images/Hulk.gif');
    }, false);
}

鼠标离开后强制gif重新加载

3 个答案: