javascript - 光标结束时激活 gif

Question

我正在建立一个星球大战粉丝网站。

我的导航菜单将是星球大战光剑。

我正计划(当光标在光剑上时)让真正的光剑出来。当光标离开光剑时，它会向下移动。

我有一个 gif 可以做到这一点，但是当光标悬停在上面时如何让它不活动然后又事件？

如果上面的想法听起来不正确，你会建议我怎么做？

Answer 1

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

您将需要每个图像的两个版本，一个是动画的 (.gif)，另一个不是(.gif/.png/.jpg/等)。

悬停时，您可以轻松地从一张图片更改为另一张图片。

例子:

$(function(){
  $('img').each(function(e){
    var src = $(e).attr('src');
    $(e).hover(function(){
      $(this).attr('src', src.replace('nonanimated.gif', 'animated.gif'));
    }, function(){
      $(this).attr('src', src);
    });
  });
});

引用 link