0

Chris Antonellis による freezegframe.jsプラグインを使用すると、基本的にマウスオーバーでアニメーション GIF を開始できます。アニメーションのフェードインなど、いくつかの優れた点もあります。これは、プラグインを開始するために必要な構文です: 設定します

<script type="text/javascript" src="freezeframe.js"></script>
<script type="text/javascript">
freezeframe = new FreezeFrame();
</script>

ヘッダーファイルに、次に単純に：

<img src="img/mr_div_retro_sphere.gif" freezeframe />

HTML 本文内。次に、画像を次のようにスタイル設定できます

figure.freezeframe-container {
    border-radius: 3px;
    border-top: 1px solid __border__;
    border-left: 1px solid __border__;
    width: 100%;
    margin: 0 auto;
    -moz-box-shadow: 5px 5px 3px #888;
    -webkit-box-shadow: 5px 5px 3px #888;
    box-shadow: 5px 5px 3px #888;
}

ドキュメントに示されているように（元のリンクを参照）。問題は、現在、背景画像のスタイルを設定する方法がないことです。ここでテスト例を参照してください。

テストからわかるように、背景画像は元の gif を使用してサイズ変更されています。ただし、サイトのサイズを伸縮自在にしたいので、最初の画像のサイズを調整する方法が必要です。

作成者に連絡しましたが、問題は現在、コードが画像の最初のフレームを取得していることであると彼は説明しています。CSS スタイリング コマンドをそれに添付する方法が不明なようです。

4

1 に答える 1

0

それは奇妙ですが、それをきちんと見せるためのハッキーな方法はこれでしょう：

.freezeframe-container { background-repeat: no-repeat; background-size: 78%; }

しかし、最初の背景画像がアニメーションGIFとあまり一致していないようです。

お役に立てば幸いです。

于 2013-03-22T15:43:00.240 に答える