Question

我希望有一个GIF，当你将鼠标悬停在最后一帧上时会播放一次，然后当你将鼠标从图像上移开时，它应该向后播放并在第一帧停顿。

我有第一帧和最后一帧的静态图像，以及向前和向后播放动画的单独动画GIF，我不知道如何编程这个。

最好我会使用CSS，但据我所知，没有js / jquery似乎没有，但是如果有人有任何想法，那将非常感激。

Answer 1

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

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

html - 在悬停时播放gif并在mouseout上播放

1 个答案: