4

我想制作下面的 gif，它最初停止但在悬停时开始播放，当鼠标悬停时它会停止......有人可以帮我吗？

在此处输入图像描述

4

5 回答 5

5

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

<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;
}

或者，如果您不需要对 IE6 的支持，您甚至可以使用纯 CSS 来执行此操作，除了以下hover内容之外不会触发任何事件<a>：

CSS：

#img_wrap #static, #img_wrap:hover #animated {
    display: inline;
}
#img_wrap #animated, #img_wrap:hover #static {
    display: none;
}
于 2012-08-26T11:48:33.483 回答
1

你需要在这里使用jquery吗？

gif 没有加载，但是 .div { background: url('.png'); } .div:hover { 背景: url('.gif'); }

于 2012-08-26T11:50:20.017 回答
1

如果您只想在没有动画时显示固定的静态图像，那么它就像在悬停时更改图像一样简单（使用 CSS 或 JS）。

但是，如果您想在鼠标移出时实际冻结当前帧上的动画，那么唯一的方法是手动为图像设置动画，例如使用 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

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

于 2012-08-26T12:40:42.633 回答
0

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

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

于 2014-04-21T06:21:40.963 回答
0

获取两张图片，一张 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;
}
于 2020-04-22T12:34:53.100 回答