3

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

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

我打算（当光标在光剑上时）让真正的光剑出来。当光标离开光剑时，它又向下移动。

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

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

4

5 回答 5

4

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

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

参考链接

于 2012-10-21T19:10:23.280 回答
3

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

.foo {
  background: url(still.png) no-repeat 0 0;
}
.foo:hover {
  background-image: url(animation.gif);
}
于 2012-10-22T13:01:37.803 回答
0

这可能有点矫枉过正，但我​​认为您可以使用 WebGL 控制 GIF。

这是一些 GIF 操作，这不是您要的，但也许是一些做自己的事情的灵感http://www.clicktorelease.com/code/gif/

于 2012-10-21T19:16:53.597 回答
0

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

我使用了一个静态图像（在我的例子中，.png 用于透明度）并切换了 src 属性以指向 mouseenter 上的动画 .gif 并返回到 mouseleave 上的 .png。为了让您的光剑从单独的刀柄变为通电，我会做的与平时有所不同。尝试在 Photoshop 中从 .gif 中提取一帧，然后使用“保存为网络和设备”将其制作成静态图像。我推荐.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 而言，我不能声称这符合最佳实践（我只是一个 padawan），但是当我需要在 mouseenter 上激活 .gif 并在 .mouseleave 上激活时，此方法有效。愿原力与你同在。

于 2013-05-31T19:55:52.830 回答
0

您最好的选择是将手柄和剑实际拆分为两个不同的图形，然后使用 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 文档）

于 2012-10-22T13:04:10.800 回答