4

最初は停止しましたが、ホバーで再生を開始し、マウスアウトすると停止する以下のgifを作成したいと思います...誰か助けてくれますか??

ここに画像の説明を入力

4

5 に答える 5

5

あなたの場合、原因アニメーションは複雑ではありません。私の考えは、ページに2つの画像を配置することです（アニメーション化されているものとされていないもの）。そして、マウスオーバー/アウトでそれらを表示/非表示にします。

<div id="img_wrap" class="static">
    <img id="animated" src="animated.gif" alt="">
    <img id="static" src="static.jpg" alt="">
</div>

脚本：

$(function(){
    $('#img_wrap').on( 'mouseenter', function() {
         $(this).toggleClass('animated', 'static');
    })
})

CSS：

.animated #static, .static #animated {
    display: none;
}
.animated #animated, .static #static {
    display: inline;
}

または、プレーンなCSSでも実行できます。IE6のサポートが必要ない場合は、次の場合以外はhoverイベントをトリガーしません<a>。

CSS：

#img_wrap #static, #img_wrap:hover #animated {
    display: inline;
}
#img_wrap #animated, #img_wrap:hover #static {
    display: none;
}
于 2012-08-26T11:48:33.483 に答える
1

ここでjqueryを使用する必要がありますか？

gifは読み込まれませんが、.div {background：url（'。png'）; } .div：hover {background：url（'。gif'）; }

于 2012-08-26T11:50:20.017 に答える
1

アニメーションしていないときに固定された静止画像を表示したいだけの場合は、ホバー時に画像を変更するのと同じくらい簡単です (CSS または JS を使用)。

しかし、マウスアウト時に現在のフレームでアニメーションを実際にフリーズしたい場合、それを行う唯一の方法は、JS などを使用して手動で画像をアニメーション化することです。

(function(){
  var imgDownload = $('#BtnDownload'), interval = 250;

  function startAnimation(img, interval, frameCount) {
    var src, prefix, ext, toId;
    if (frameCount) img.data('frames', frameCount);
    interval = interval || img.data('interval');
    src = img.attr('src').split('.');
    ext = src.pop();
    prefix = src.join('.');
    img.data('ext') || img.data('ext', ext);
    img.data('prefix') || img.data('prefix', prefix);
    restartAnimation(img, interval);
    img.hover(function() {
      restartAnimation(img, interval);
    });
    img.mouseout(function() {
      clearTimeout($(this).data('timeout-id'));
    });
  }
  function restartAnimation(img, interval) {
    todId = setTimeout(animate, interval, img);
    img.data('timeout-id', toId);
  }
  function animate(img) {
    var currentFrame, nextFrame, frameCount, prefix, ext;
    currentFrame = img.data('current-frame');
    frameCount = img.data('frames');
    prefix = img.data('prefix');
    ext = img.data('ext');

    nextFrame = currentFrame + 1;
    if (nextFrame >= frameCount) nextFrame = 0;
    img.data('current-frame', nextFrame);
    img.attr('src', prefix + (nextFrame? nextFrame : '') + '.' + ext);
  }

  startAnimation(imgDownload, interval);
)());

および次の HTML:

<img src="/img/btn_download.png" alt="Download" data-frames="6">

そしてこれらの画像：

/img/btn_download.png
/img/btn_download1.png
/img/btn_download2.png
/img/btn_download3.png
/img/btn_download4.png
/img/btn_download5.png

注: これは単純な実装です。プロダクション コードの場合、画像をプリロードするか、単にスプライトマップを使用する必要があります。ただし、基本的な概念は同じです。画像/ボタンを手動でアニメーション化するため、アニメーションをフリーズすると、現在のフレームでフリーズします。別の方法として、XHR を使用して GIF ファイルをダウンロードし、バイナリ データを解析して個々のフレームを抽出し、HTML5 Canvas を使用してそれらをレンダリングするjsgifなどを使用します。

于 2012-08-26T12:40:42.633 に答える
0

いいえ、画像のアニメーションを制御することはできません。

各 iamge の 2 つのバージョンが必要です。1 つはアニメーション化されており、もう 1 つはアニメーション化されていません。ホバーすると、ある画像から別の画像に簡単に変更できます。

于 2014-04-21T06:21:40.963 に答える