0

オープニングの gif アニメーションをフェードさせて、メニューと静的なロゴを表示することはできますか? GIFアニメーションが一度再生される時間があった後、フェードのタイミングが発生するようにします。次に、メニューと静的なロゴにクロスフェードします。ありがとう。

4

1 に答える 1

0

それは<img>要素ですか？もしそうなら：

  • 要素を削除する<img>と、ページがリフローし、ボタンが上に移動して「ギャップを埋める」ようになります。
  • 使用する場合display: none、画像は表示されず、スペースを占有しません (ページは を削除したかのようにリフローします<img>)。
  • を使用するvisibility: hiddenと、<img>は見えなくなりますが、所定の位置に留まります。ボタンは非表示の画像の下にとどまります。

要素を削除したり、JavaScript を使用してその CSS を編集したりするには、まず要素への参照を取得する必要があります。これを行う 1 つの方法は、 を指定してidを使用することgetElementByIdです。次に、そのスタイル プロパティを操作したり、DOM から削除したりできます。

gif アニメーションがいつ終了したかの検出について: JavaScript と通常の gif<img>要素を使用してこれを検出する方法はありません。setTimeoutに依存する必要があります。読み込み時間は訪問者ごとに異なるため、画像の読み込みが完了したらタイムアウトを開始できます。

<img src="img/animation.gif" id="disappearing_image" />

var img = document.getElementyById('disappearing_image');
var runtime = 1200; // in milliseconds

img.onload = function() {
    setTimeout(function() {
        $(img).fadeOut("slow");
    }, runtime);
    img.onload = null;
};

idこれにより、指定された("disappearing_image")のイメージがruntimeミリ秒後にフェードアウトします。

イベントが処理されたら、onloadハンドラーを元に戻すことに注意してください。nullこれは、Internet Explorer が最初に画像が読み込まれたときにこのイベントを発生させ、次にアニメーションのフレームごとに発生させるためです。

最後に 1 つ: ブラウザーが異なれば、アニメーション GIF の読み込み方法も異なる場合があります。たとえば、あるブラウザでは、アニメーションを開始する前にファイル全体をロードすることができますが、別のブラウザでは、ロード中に画像をonloadアニメーション化してから、再度トリガーしてアニメーション化することができます。問題が発生した場合は、イメージのプリロードを調べることができます(SO で「[javascript] preload img」を検索してください)。

于 2013-08-07T03:49:17.920 に答える