私はこれに対する答えを探していましたが、見つけましたが、どのように使用するのか分かりません。その質問へホバリングでgifをアニメーション化する
Stop a gif animation onload, on mouseover start the activation
Guffaの答えは、まさに私が欲しいものですが、私はそのコードを使用する方法がわかりません。
私はjqueryプラグインを持っていますが、プラグインではなく、Guffaの回答にあったコードはどこに置くのですか？イメージを参照するにはどのように使用しますか？それを動作させるために呼び出さなければならない機能はありますか？もしそうなら、それを呼び出す最善の方法は何でしょうか？
申し訳ありませんが、既に回答済みですが、彼の答えは十分ではなく、より具体的な回答を求めるようにコメントすることはできませんでした。
を助け
・ホープ - 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>
私はリンクを読んでいない、これを行うにはしかし、最も簡単な方法は、次のようにホバー上の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をプリロードすることができます。あなたが必要なもののための実施例である。ここ
それがないが、それはですグファの問題と非常によく似た答えは、私はそのコードをどうすればいいのか分からないということです。それは私が呼び出す必要がある機能ですか？どこに置くの？ HTML文書の中でどのように動作するかを教えてください –
@マーク・クレーマー – ianbarker
キャンバスを使用してOKであれば、これを試してみてください：
<!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>
さて、どうもありがとうございました。しかし、もし私があなただったら、jqueryをscriptタグの中に入れてしまいます。しかし、ありがとう、私はこれを答えとして受け入れます。ああ、あなたがリンクしているサイトは非常に便利です、私はまだそれを見ていないとは思えません。 –
アニメーションGIFを事前にロードしてください。そうしないと、ロールオーバーの遅延が発生する可能性があります。または、もっと良いことに、アニメーションgifの上に静的gifを持つ1つのgifを作成し、要素の背景イメージとしてgifを設定し、ロールオーバー時の背景の位置を変更するだけです（別名CSSスプライトのロールオーバー）。 – Tim