2

私は最近、オバマ陣営のこのマイクロサイトに出くわしました:

http://www.barackobama.com/anniversary

このサイトの多くの優れた機能の 1 つは動的ヘッダーです。ブラウザー ウィンドウのサイズを小さくすると、上部にある「OBAMA * BIDEN」ロゴが自動的にヘッダーの左側にフロートし、幅が 36 ピクセルに変更されます (したがって、「非表示」になります)。 「「オバマ・ビデン」テキスト）。

このページの開発者はどのようにしてこの効果を達成しましたか? これは javascript/jquery 駆動型ですか、それとも純粋に CSS トリックですか?

アイデア？

4

1 に答える 1

1

この質問はwindow.resizeイベントをカバーしています。ハンドラーで必要なことは何でもできます。

もう1つのオプションは、ブラウザウィンドウのサイズが変更されたら、適用されるCSSを変更できるメディアクエリを使用することです（これは、参照するサイトが行うことです。スタイルクラスの変更とアニメーションを組み合わせます（Chromeデベロッパーツールを使用して、適用されるスタイルを確認します）。大小両方のブラウザサイズのロゴに））。

于 2012-04-19T16:22:50.633 に答える