javascript – 光标结束时激活gif

我正在建立一个星球大战粉丝.

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

我打算制作(当光标在光剑上时)实际光剑出来.当光标离开光剑时,它会向下移动.

我有一个gif可以做到这一点,但是当光标悬停在上面时,如何让它变为无效然后激活？

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

解决方法:

不,您无法控制图像的动画.

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

在悬停时,您可以轻松地从一个图像更改为另一个图像.

例：

$(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

标签：html,animated-gif,javascript,jquery,css
来源： https://codeday.me/bug/20190729/1570746.html