ホームページ >ウェブフロントエンド >htmlチュートリアル >、これら 2 つの css_html/css_WEB-ITnose を実装する方法
1 つ目は、セカンダリ ナビゲーション バーを実装することです。
セカンダリ ナビゲーション バーの上にプライマリ ナビゲーション バーもあります。
スライド バーが下にスライドすると、プライマリ ナビゲーション バーは徐々に消えますが、セカンダリ ナビゲーション バーはページの上部に固定されたままになります。
スライダーがページの上部に戻ると、第 1 レベルのナビゲーション バーが再び表示されます。
2 番目の方法は、画像に曇りガラスの効果を与えることです。
商品購入時と同様に、マウスを写真上に移動すると背景がぼかされます。すりガラスには「今すぐ購入」ボタンが付いています。
私が何を言っているのか理解できない場合は、このページに同様の実装があります。
http://www.23mofang.com/
最初の実装は次のようです。 jqueryで実装する必要があるのでしょうか?あまり確信はありませんが、少なくともページ上の CSS に関する手がかりは見当たりません。
使用経験のある方、アドバイスを頂ければ幸いです。もちろん、ヘルプドキュメントを提供していただければ大変助かります。
すべては CSS と組み合わせた jQuery によって行われます
1. セカンダリ ナビゲーション バー、位置: ブラウザ ウィンドウを基準にして絶対位置が固定されています。スクロール バーの位置が第 1 レベルのナビゲーション バーの高さより大きい場合、第 2 レベルのナビゲーション バーの上部の値が 0 になるようにします。すりガラス効果ではありませんが、白い背景レイヤーの 90 % の透明度
はすべて、CSS と組み合わせた jQuery によって行われます
1. セカンダリ ナビゲーション バー、位置: 固定。ブラウザウィンドウを基準にして絶対的に配置されます。スクロール バーの位置が第 1 レベルのナビゲーション バーの高さより大きい場合、第 2 レベルのナビゲーション バーの上部の値が 0 になるようにします。曇りガラス効果ではなく、白い背景レイヤーの透明度 90 %
2. jqueryはCSS3アニメーションを組み合わせ、マウスオーバーとマウスアウトでクラスを切り替えることで実現しています。すりガラス効果ではなく、透明度90%の白背景レイヤーです