悬停时动画 gif答案

【问题标题】：Animating a gif on hover悬停时动画 gif
【发布时间】：2011-11-20 08:21:45
【问题描述】：

我已经为此寻找答案并找到了它，但我不知道如何使用它。

Stop a gif animation onload, on mouseover start the activation

Guffa 对这个问题的回答正是我想要的，但我不知道如何使用该代码。

我有 jquery 插件，但我应该把代码放在哪里（不是插件；Guffa 的答案中的代码）？我如何在参考图像时使用它？有没有我必须调用的函数才能让它工作？如果是这样，最好的称呼方式是什么？

很抱歉问了一个已经回答的问题，但他的回答不够具体，我无法评论要求他提供更具体的答案。

【问题讨论】：

标签： javascript jquery animation gif

【解决方案1】：

这是您需要的工作示例 - http://jsfiddle.net/EXNZr/1/

<img id="imgDino" src="http://bestuff.com/images/images_of_stuff/64x64crop/t-rex-51807.jpg?1176587870" />

<script>
    $(function() {
        $("#imgDino").hover(
            function() {
                $(this).attr("src", "animated.gif");
            },
            function() {
                $(this).attr("src", "static.gif");
            }                         
        );                  
    });
</script>

【讨论】：

好的，非常感谢。但是，如果我是你，我只会将 jquery 放在脚本标签中。但是谢谢，我会接受这个作为答案。哦，你链接到的网站非常有用，我不敢相信我还没有看到。
确保预加载动画 gif，否则可能会延迟翻转。或者更好的是，在动画 gif 上方使用静态 gif 制作一个 gif，将 gif 设置为元素的背景图像，然后简单地更改翻转时的背景定位（也称为 CSS 精灵翻转）。

【解决方案2】：

我还没有阅读链接，但是最简单的方法是在悬停时使用 javascript 更改 img tags src 属性，就像这样 (jQuery)

$(function() {
    $('a').hover(function() {
      $(this).attr('src','path_to_animated.gif');
    },function() {
      $(this).attr('src','path_to_still.gif');
    }
});

不需要插件...您可能希望通过在悬停绑定之前添加 $('<img />',{ src: 'path_to_animated.gif'}); 来预加载动画 gif。

希望对你有帮助

【讨论】：

确实如此，但这与 guffa 的答案非常相似，问题是我不知道如何处理该代码。这是我需要调用的函数吗？我把它放在哪里？告诉我它是如何在 HTML 文档中工作的
@Mark Kramer 那么你不明白哪些位？
或者用纯js预加载：document.createElement('img').src = '//example.com/example.png';发件人：stackoverflow.com/questions/8971312/…

【解决方案3】：

如果你可以使用画布试试这个：

   <!DOCTYPE html>
    <html>
    <head>
        <style>
            .wrapper {position:absolute; z-index:2;width:400px;height:328px;background-color: transparent;}
            .canvas {position:absolute;z-index:1;}
            .gif {position:absolute;z-index:0;}
            .hide {display:none;}
        </style>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

        <script>
            window.onload = function() {
                var c = document.getElementById("canvas");
                var ctx = c.getContext("2d");
                var img = document.getElementById("gif");
                ctx.drawImage(img, 0, 0);
            }

            $(document).ready(function() {
                $("#wrapper").bind("mouseenter mouseleave", function(e) {
                    $("#canvas").toggleClass("hide");
                });
            });
        </script>

    </head>
    <body>

    <div>
        <img id="gif" class="gif" src="https://www.macobserver.com/imgs/tips/20131206_Pooh_GIF.gif">

        <canvas id="canvas" class="canvas" width="400px" height="328px">
        </canvas>

        <div id="wrapper" class="wrapper"></div>
    </div>

    </body>
    </html>

【讨论】：