触发悬停时播放 GIF 动画

Question

触发悬停时播放 GIF 动画

javascriptjqueryanimationgif

15

我找到了答案，但是不知道如何使用。

停止gif动画的加载，鼠标悬停时启动

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

我已经有了jquery插件，但是我应该把代码（不是插件中的代码；是Guffa回答中的代码）放在哪里？在处理图像方面，我该如何使用它？是否有需要调用的函数来使它工作？如果有，最好的调用方式是什么？

很抱歉提出一个已经有答案的问题，但他的答案不够具体，我无法发表评论以寻求更具体的答案。

- Mark Kramer

3个回答

6

我还没有阅读这个链接，不过最简单的方法是在鼠标悬停时使用JavaScript更改img标签的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，以便在悬停绑定之前加载。希望这可以帮到你。

- ianbarker

是的，但这与guffa的答案非常相似。问题在于我不知道该如何处理那段代码。它是一个需要调用的函数吗？我应该把它放在哪里？请向我展示它在HTML文档中的工作方式。 - Mark Kramer

@Mark Kramer，你不明白哪些部分？ - ianbarker

或者使用纯JS预加载：document.createElement('img').src = '//example.com/example.png'; 来源：https://dev59.com/Fmox5IYBdhLWcg3wyHTc - Michal - wereda-net

5

如果您可以使用canvas，请尝试以下方法：

   <!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>

- sunny

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amit · Accepted Answer

这里有一个可用的示例，可以满足你的需求 - 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>