Javascript 在悬停时动画 gif
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7473117/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animating a gif on hover
提问by Mark Kramer
I've looked for the answer for this and I found it, but I don't know how to use it.
我已经为此寻找了答案并找到了它，但我不知道如何使用它。
Stop a gif animation onload, on mouseover start the activation
Guffa's answer to that question is exactly what I want, but I don't know how to use that code.
Guffa 对这个问题的回答正是我想要的，但我不知道如何使用该代码。
I have the jquery plugin, but where do I put the code (not the plugin; the code that was in Guffa's answer)? How do I use it in reference to the images? Is there a function I have to call to get it to work? If so, what would be the best way to call it?
我有 jquery 插件，但是我应该把代码放在哪里（不是插件；Guffa 的答案中的代码）？我如何使用它来参考图像？有没有我必须调用的函数才能让它工作？如果是这样，最好的称呼是什么？
Sorry for asking a question that has already been answered, but his answer wasn't specific enough and I couldn't comment to ask him for a more specific answer.
很抱歉提出了一个已经回答的问题，但他的回答不够具体，我无法评论以要求他提供更具体的答案。
回答by Amit
Here is a working example for what you need - http://jsfiddle.net/EXNZr/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>
回答by ianbarker
I haven't read the link, however the easiest way to do this is to change the img tags src attribute with javascript on hover like this (jQuery)
我还没有阅读链接，但是最简单的方法是像这样在悬停时使用 javascript 更改 img 标签 src 属性（jQuery）
$(function() {
$('a').hover(function() {
$(this).attr('src','path_to_animated.gif');
},function() {
$(this).attr('src','path_to_still.gif');
}
});
No plugins required... you might want to preload the animated gif by adding $('<img />',{ src: 'path_to_animated.gif'});before the hover bind.
不需要插件...您可能希望通过$('<img />',{ src: 'path_to_animated.gif'});在悬停绑定之前添加来预加载动画 gif 。
Hope that helps
希望有帮助
回答by sunny
Try this if you are OK to use 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>
