Html 在鼠标上方播放Gif并暂停Gif而不替换图像？

我试图寻找一个代码示例，它允许用户在鼠标上方设置gif动画，并在鼠标离开时暂停。我看过很多教程都在讨论这一点，但我想要一个不同的效果

我注意到大多数GIF在鼠标离开时“重置”。也就是说，要么gif被普通图像覆盖，要么动画恢复到起始位置。我想要实现的是一个更加无缝的“暂停”，它允许您在不使用占位符图像的情况下从停止的地方开始。与本页上的示例类似：

请注意，当您将鼠标放在图像上时，动画只是暂停而不替换任何内容，否则将继续

我不知道是否可以使用gif，因为这个示例使用的是基本的css形状，但是必须有某种方法可以在鼠标悬停gif并在鼠标悬停时继续，而不覆盖循环动画上的图像？如果没有，是否有一种方法可以使用鼠标悬停的电影文件，并在鼠标悬停的地方播放

谢谢

---

编辑：多亏@brbcoding和他的天才，这个问题才得以解决！有关解决方案的详细信息可以在下面的帖子或他的博客帖子中找到：

没有。Gif图像无法“看到”鼠标。它们仅仅是显示的图像。为了暂停已设置动画的gif，需要交换未设置动画的类似图像

---

这是张贴，有组成的静态图像。这些插件将允许精灵在鼠标悬停在

上，因此，我考虑了一下。。。你可以做一些很酷的事情，比如：

首先，将gif分解为多个图像，然后使用css关键帧设置它们的动画

#faux-gif {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    background-image: url(http://i.imgur.com/E2ee6fI.gif);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    width: 300px;
    height: 300px;
    /* animation: giffy 0.5s infinite linear; */
    /* no fade between frames */
    animation: giffy 0.5s infinite steps(1);
}

#faux-gif:hover {
    animation-play-state:paused;
}

@keyframes giffy {
    0%   { background-image: url('http://i.imgur.com/E2ee6fI.gif'); } 
    15%  { background-image: url('http://i.imgur.com/JIi0uul.gif'); }
    30%  { background-image: url('http://i.imgur.com/owNGnNN.gif');}
    45%  { background-image: url('http://i.imgur.com/2Ii6XOz.gif'); }
    60%  { background-image: url('http://i.imgur.com/ZmQBrQ5.gif'); }
    75%  { background-image: url('http://i.imgur.com/iAsfHyY.gif'); }
    90%  { background-image: url('http://i.imgur.com/AJwRblj.gif'); }
    100% { background-image: url('http://i.imgur.com/fx5wUNY.gif'); }
}

JavaScript版本。。。没有经过彻底的测试，但这将是基本的想法

window.onload = function() {

    function FauxGif(element, frames, speed) {
        this.currentFrame = 0,
        this.domElement   = element,
        this.frames       = frames || null,
        this.speed        = speed  || 200;
        this.interval;
        this.init();
    }

    FauxGif.prototype = {
        init: function() {
            // set the first one to the first image
            console.log(this.frames[0])
            this.domElement.style.backgroundImage = "url(" + this.frames[0] + ")";
        },
        pause: function() {
            clearInterval(this.interval);
        },
        resume: function() {
            var that = this;

            that.interval = setInterval(function(){
                that.currentFrame < that.frames.length - 1 ? that.currentFrame++ : that.currentFrame = 0;
                that.domElement.style.backgroundImage = "url(" + that.frames[that.currentFrame] + ")";
            }, this.speed);
        }
    }

    var frames = [
                    'http://i.imgur.com/E2ee6fI.gif',
                    'http://i.imgur.com/JIi0uul.gif',
                    'http://i.imgur.com/owNGnNN.gif',
                    'http://i.imgur.com/2Ii6XOz.gif',
                'http://i.imgur.com/ZmQBrQ5.gif',
                'http://i.imgur.com/iAsfHyY.gif',
                'http://i.imgur.com/AJwRblj.gif',
                'http://i.imgur.com/fx5wUNY.gif'
            ]

var elem = document.querySelector('#faux-gif'),
    gif  = new FauxGif(elem, frames);


elem.addEventListener('mouseenter', function(){
    gif.resume()
});

elem.addEventListener('mouseleave', function() {
    gif.pause();
});
}

window.onload=function（）{
函数FauxGif（元素、帧、速度）{
此.currentFrame=0，
this.domeElement=元素，
this.frames=frames | | null，
这个。速度=速度| | 200；
这个时间间隔；
this.init（）；
}
FauxGif.prototype={
init:function（）{
//将第一个设置为第一个图像
console.log（this.frames[0]）
this.domElement.style.backgroundImage=“url（“+this.frames[0]+”）；
},
暂停：函数（）{
clearInterval（这个.interval）；
},
恢复：函数（）{
var=这个；
that.interval=setInterval（函数（）{
that.currentFrame

---

它没有使用gif。它使用的是CSS3。您链接的教程是关于CSS动画的，而不是关于gif。AFAIK您不能做任何事情来影响CSS中的动画gif。你可以使用css动画来模拟动画gif，然后达到这个效果。我会将gif分解成单独的帧，然后使用关键帧来设置动画。然后你可以停在任何你想停的地方。我不认为OP试图将该链接表示为一个动画.gif，而是将其作为他试图实现的效果的一个例子。寻找我发现的替代方案[免费和开源（尽管不是免费的）]可能值得一看。谢谢你的回复。我将进一步研究“jquery方法”，因为我还没有看到任何插件，所以这也很有帮助。我会调查一下，看看是否有什么好处。有趣！这与我的想法很接近。事实上，这几乎正是我所说的。然而，我注意到代码笔在firefox中不起作用。在这方面有没有其他的退路？还有没有一种方法可以让图像开始暂停并在鼠标悬停时播放？在代码笔中实现的功能有点相反，但保持暂停功能。真的很感谢你们所有人调查此事！六羟甲基三聚氰胺六甲醚。。。我不知道除了一些js之外，我是否知道一种跨浏览器工作的方法。也许你可以创建一个swapImage（）函数来做同样的事情（只需设置背景图像）。不过，我会在早上回到电脑前添加一个函数。与反转操作相同。恐怕你需要用JavaScript来做这件事。如果可能的话，JavaScript是可以的。就像我之前说的，如果做不到，就不要在上面流汗。我甚至不认为这是可能的，所以你们已经让我大吃一惊了哈哈。请慢慢来！仍然没有空闲时间看js，但是你可以通过将

动画：giffy 0.5s无限线性

更改为

动画：giffy 0.5s无限步骤（1）

@XavierTheGreat来消除淡入，添加了一个js版本。你会想测试它，我只是写得很快。此外，预加载图像也是您的最佳选择。如果不这样做，您可能会看到空白帧。