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

---

参考

这可能有点过分，但我认为你可以用WebGL控制GIF

---

这里有一些GIF操作，这不是你想要的，但可能是一些自己做某事的灵感，如ParagMeshram所说，但不需要使用jQuery或JavaScript：

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

---

最好的办法是将手柄和剑实际分割成两个不同的图形，然后使用Javascript（作为背景属性）设置剑的动画。这样，您就不会有GIF文件格式的限制，但仍然有许多更小的文件。您需要创建一个与剑大小相同的div，并将其设置为background，然后将background-position-x设置为-100%，并在悬停时将其重新设置为动画，您可以使用jQuery实现这一点：

$('.sword').on('hover', function(event){
$(this).animate({
        'background-position-x': '0%',
    }, 100, 'linear');
});
$('.sword').off('hover', function(event){
$(this).animate({
        'background-position-x': '-100%',
    }, 100, 'linear');
});

---

（我记下了这一点，如果这不起作用，请检查jQuery文档）

我遇到了类似的情况，并找到了一个非常简单的解决方案。我对JQuery非常陌生，所以我不确定这是否符合最佳实践，但它是有效的

我使用了一个静态图像（.png表示透明度，在我的例子中）并关闭了src属性以指向mouseenter上的动画.gif，并返回mouseleave上的.png。为了让你的光剑从剑柄单独转动到通电，我会做得和平常有点不同。尝试在Photoshop中从.gif中提取一帧，并使用“为web和设备保存”将其转换为静态图像。我推荐.png。在HTML标记中，将这个静态的刀柄图像用于图像的src，同时确保为它提供一个ID，例如本例中的saber

现在转到jquery脚本。我将它链接到一个单独的文件中。对于一把军刀，它应该是这样的：

$(document).ready(function()
{


$("#saber").mouseenter(
    function()
    {
        $(this).attr("src", "img/stillframehilt.png");
    },
    function()
    {
        $(this).attr("src", "img/saberpowerup.gif");
    });
$("#saber").mouseleave(
    function()
    {
        $(this).attr("src", "img/saberpowerup.gif");
    },
    function()
    {
        $(this).attr("src", "img/stillframehilt.png");
    });

    });

注意，在mouseleave上，我让它将src切换为“img/saberpowerdown.gif”。我认为，与其让军刀在休眠状态下（包括我在内的任何《星球大战》极客都会对此感到畏缩）立即恢复到剑柄状态，不如使用一个与军刀开启状态相反的.gif文件。这可以通过反转动画帧的顺序来实现（确保可见层是正确的）。为了更好的测量，我会确保什么时候它也不会循环.gif的，以及在断电后单独添加几个额外的刀柄框架，以确保它保持关闭状态

此外，在军刀上添加一个.click可以将src更改为断电状态，甚至可以更改为不同的动画，但这只是额外的天赋。对于每一个额外的光剑，使用相同的代码，只需更改id，以逻辑方式（如按颜色）引用每个光剑

同样，我不能声称这符合jquery的最佳实践（我只是一名学徒），但当我需要在mouseenter上激活.gif并返回.mouseleave时，这种方法就起作用了。愿原力与你同在