gif开始在悬停时播放并在mouseout时停止播放？

Question

我wana制作下面的gif最初停止但开始播放时鼠标停止它会停止...任何人都可以帮助我吗？

Answer 1

在你的情况下，因为动画并不复杂，我的想法是在页面上放置两个图像（动画而不是动画）。并在鼠标上显示/隐藏它们。

<div id="img_wrap" class="static">
    <img id="animated" src="animated.gif" alt="">
    <img id="static" src="static.jpg" alt="">
</div>

脚本：

$(function(){
    $('#img_wrap').on( 'mouseenter', function() {
         $(this).toggleClass('animated', 'static');
    })
})

CSS：

.animated #static, .static #animated {
    display: none;
}
.animated #animated, .static #static {
    display: inline;
}

或者你甚至可以使用普通的CSS做到这一点，如果你不需要IE6的支持，除了hover之外什么都不会触发<a>事件：

CSS：

#img_wrap #static, #img_wrap:hover #animated {
    display: inline;
}
#img_wrap #animated, #img_wrap:hover #static {
    display: none;
}

Answer 2

你需要在这里使用jquery吗？

gif没有加载，但是 .div {background：url（'。png'）; } .div：hover {background：url（'。gif'）; }

Answer 3

如果你只想在没有动画的情况下显示固定的静态图像，那就像在悬停时用CSS或JS更改图像一样简单。

但是如果你想在mouseout上实际冻结当前帧上的动画，那么唯一的方法就是手动设置动画，例如与JS：

(function(){
  var imgDownload = $('#BtnDownload'), interval = 250;

  function startAnimation(img, interval, frameCount) {
    var src, prefix, ext, toId;
    if (frameCount) img.data('frames', frameCount);
    interval = interval || img.data('interval');
    src = img.attr('src').split('.');
    ext = src.pop();
    prefix = src.join('.');
    img.data('ext') || img.data('ext', ext);
    img.data('prefix') || img.data('prefix', prefix);
    restartAnimation(img, interval);
    img.hover(function() {
      restartAnimation(img, interval);
    });
    img.mouseout(function() {
      clearTimeout($(this).data('timeout-id'));
    });
  }
  function restartAnimation(img, interval) {
    todId = setTimeout(animate, interval, img);
    img.data('timeout-id', toId);
  }
  function animate(img) {
    var currentFrame, nextFrame, frameCount, prefix, ext;
    currentFrame = img.data('current-frame');
    frameCount = img.data('frames');
    prefix = img.data('prefix');
    ext = img.data('ext');

    nextFrame = currentFrame + 1;
    if (nextFrame >= frameCount) nextFrame = 0;
    img.data('current-frame', nextFrame);
    img.attr('src', prefix + (nextFrame? nextFrame : '') + '.' + ext);
  }

  startAnimation(imgDownload, interval);
)());

以及以下HTML：

<img src="/img/btn_download.png" alt="Download" data-frames="6">

和这些图片：

/img/btn_download.png
/img/btn_download1.png
/img/btn_download2.png
/img/btn_download3.png
/img/btn_download4.png
/img/btn_download5.png

注意： 这是一个天真的实现。对于生产代码，您需要预加载图像或只使用精灵图。但基本概念是相同的 - 手动设置图像/按钮的动画，这样当你冻结动画时，它会在当前帧上冻结。另一种方法是使用类似jsgif的东西，它使用XHR下载GIF文件，解析二进制数据以提取单个帧，然后使用HTML5 Canvas渲染它们。

Answer 4

不，你无法控制图像的动画。

你需要两个版本的每个iamge，一个是动画的，一个不是。在悬停时，您可以轻松地从一个图像更改为另一个图像。

Answer 5

获取两张图片，一张png和一张gif：

<div>
    <img class="static" src="https://webpage.com/image1.png">
    <img class="active" src="https://webpage.com/image2.gif">
</div>

使用以下css，在悬停时png将变得不透明，并且gif可见。

.static {
  position:absolute;
  background: white;
}

.static:hover {
  opacity:0;
}