光标悬停时激活gif

Question

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

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

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

我有一个gif可以做到这一点，但如何使它不活动，然后激活时，光标悬停在上面？

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

Answer 1

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

您需要每个图像的两个版本，一个是动画的(.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

Answer 2

就像Parag Meshram所说的，但不需要使用jQuery或JavaScript：

.foo {
  background: url(still.png) no-repeat 0 0;
}
.foo:hover {
  background-image: url(animation.gif);
}

Answer 3

这可能有点夸大其词，但我认为你可以用WebGL控制GIF。

这里有一些GIF的操作，它不是你想要的，但可能是做一些自己的http://www.clicktorelease.com/code/gif/的灵感。