5

アニメーションを一度再生する .gif があります。ループしないので、ループさせたくありません。

2つの画像があります（「1つのpng」と「1つのgifアニメーション」）

マウスがpng画像の上にあるたびにgifが再生されるようにしたい。

私の問題は、マウスの位置をpng画像の上に設定すると、gifが1回再生されて停止することです。マウスを離してから画像の上に戻すと、再生されなくなります。

私のCSSコード：

#icon{
 float: left;
 width:50px;
 height:50px;
 background: url("images/smal_icon.png") no-repeat scroll 0% 0% transparent;
}
#icon:hover{
float: left;
width:50px;
height:50px;
background: url("images/smal_icon.gif") no-repeat scroll 0% 0% transparent;
}

#iconDIVです

4

3 に答える 3

6

デフォルトでは、GIF のループやアニメーションを制御することはできません。ブラウザは GIF をそのまま再生します。

そのため、デフォルトでは、GIF の再生時間や再生時間を指定することはできません。

3 つの解決策があります
。 1. img の src を a に置き換えてdata:image、GIF をインライン化します。src が変更されるたびに、GIF が再び再生されます。実際の URL の代わりにインライン GIF を使用すると、GIF を再ダウンロードする必要がないため、時間を節約できます。例についてはhttp://www.websiteoptimization.com/speed/tweak/inline-images/を参照してください
2.コメントや他の回答で述べたように、imgタグのsrcを同じGIFに置き換えることができますが、 GIF を再ダウンロードして再度再生できるように、URL に追加します (?someRandomNumber=1345 など)。欠点は、GIF が再ダウンロードされることです。
3. http://slbkbs.org/jsgif/のようなものを使用しますAJAX経由でGIFをダウンロードし、キャンバス要素を使用して描画し、完全に制御できます...

于 2013-06-13T12:10:25.643 に答える