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/

Answer 4

你最好的选择是将手柄和剑分成两个不同的图形，然后使用Javascript（作为背景属性）为剑设置动画。这样您就不会受到GIF文件格式的限制，但仍然会有更小的文件。您需要创建一个与剑相同大小的div并将其设置为背景，然后将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文档，如果这不起作用）

Answer 5

我有类似的情况，发现了一个非常简单的解决方案。我对JQuery很新，所以我不确定这是否符合最佳实践，但它确实有效。

我使用了静态图像（在我的例子中是透明的.png）并将src属性切换为指向mouseenter上的动画.gif并返回mouseleave上的.png。为了你的光剑从单独的剑柄到通电，我会做的有点不同于平常。尝试从Photoshop中的.gif中获取一个帧，并使用“为网络和设备保存”将其制作成静态图像。我推荐.png。在HTML标记中使用hilt的静态图像作为图像的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");
    });

    });

注意on mouseleave我把它切换到“img / saberpowerdown.gif”。我认为，而不是让军刀瞬间恢复到处于休眠状态的剑柄（任何星球大战的怪胎[我自己包括]都会畏缩），看起来更好的是.gif基本上与剑术转向相反上。这可以通过反转动画帧的顺序来实现（确保可见层是正确的）。为了更好的衡量，我会确保何时不让它循环.gif以及在完成断电时单独添加几个额外的刀柄以确保它保持关闭状态。

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

同样，我不能声称这与jquery的最佳实践一致（我只是一个padawan）但是当我需要在mouseenter上激活.gif并重新启动时，这种方法很有用.mouseleave 。愿部队与你同在。

光标结束时激活gif

5 个答案: