html

Question

我想要一个 GIF，当您将鼠标悬停在它上面时播放一次并在最后一帧暂停，然后当您将鼠标移开图像时它应该向后播放并在第一帧暂停。

我有第一帧和最后一帧的静态图像，以及向前和向后播放动画的单独动画 GIF，我只是不知道我将如何对此进行编程。

我最好只使用 CSS，但据我所知，没有 js/jquery 似乎是不可能的，但是如果有人有任何想法，我们将不胜感激。

Answer 1

我认为纯 CSS 很难做到这一点，因为一旦您加载动画 gif，无论它是否可见，它都会无限循环。因此，您必须将 gif 的开始与 mouseover / mouseout 事件同步。

这是一个 jQuery 实现，它更改了 mouseover 和 mouseout 事件的 src 属性。当您在动画期间 mouseout 或 mouseover 时，自旋锁会处理这种情况 - 它会等到动画完成，然后反向播放，除非在前进动画结束时鼠标悬停在元素上。

var firstFrame = "http://imgur.com/UeMOrix.gif";
var lastFrame = "http://imgur.com/vy7weQ1.gif";
var forwardAnimation = "http://i.imgur.com/UB0g8dT.gif";
var backwardAnimation = "http://i.imgur.com/aIxrX26.gif";

var animationLength = 5040;
var playing = false;
var checkingIfPlaying = false;

function playForward() {
  if ($("#animation").is(":hover")){
    playing = true;
    $("#animation").attr("src", forwardAnimation);
    window.setTimeout(function () {
      $("#animation").attr("src", lastFrame);
      playing = false;
    }, animationLength);
  }
  else {
    $("#animation").attr("src", firstFrame);
  }
}

function playBackward() {
  if ($("#animation").is(":hover")) {
    $("#animation").attr("src", lastFrame);
  }
  else {
    playing = true;
    $("#animation").attr("src", backwardAnimation);
    window.setTimeout(function () {
      $("#animation").attr("src", firstFrame);
      playing = false;
    }, animationLength);
  }
}

$("#animation").mouseover(function (e) {
    if (!checkingIfPlaying) {
      checkingIfPlaying = window.setInterval(function () {
        if (!playing) {
          window.clearInterval(checkingIfPlaying);
          playForward()
          checkingIfPlaying = false;
        }
      }, 0);
    }
});

$("#animation").mouseout(function (e) {
    if (!checkingIfPlaying) {
      checkingIfPlaying = window.setInterval(function () {
        if (!playing) {
          window.clearInterval(checkingIfPlaying);
          playBackward()
          checkingIfPlaying = false;
        }
      }, 0);
    }
});

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>so</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

</head>

<body>

<!-- preload images to prevent flickering -->
<div style="display: none;">
    <img src="http://i.imgur.com/UB0g8dT.gif">
    <img src="http://i.imgur.com/aIxrX26.gif">
    <img src="http://imgur.com/vy7weQ1.gif">
</div>

<img id="animation" src="http://imgur.com/UeMOrix.gif">

</body>
</html>

html - 鼠标悬停时播放一次 gif，鼠标移开时反转播放

html - play gif once on hover and play reversed on mouseout

javascript

css

animation

gif