ホームページ  >  記事  >  ウェブフロントエンド  >  、これら 2 つの css_html/css_WEB-ITnose を実装する方法

、これら 2 つの css_html/css_WEB-ITnose を実装する方法

WBOY
WBOYオリジナル
2016-06-21 08:47:461054ブラウズ

1 つ目は、セカンダリ ナビゲーション バーを実装することです。
セカンダリ ナビゲーション バーの上にプライマリ ナビゲーション バーもあります。
スライド バーが下にスライドすると、プライマリ ナビゲーション バーは徐々に消えますが、セカンダリ ナビゲーション バーはページの上部に固定されたままになります。
スライダーがページの上部に戻ると、第 1 レベルのナビゲーション バーが再び表示されます。

2 番目の方法は、画像に曇りガラスの効果を与えることです。
商品購入時と同様に、マウスを写真上に移動すると背景がぼかされます。すりガラスには「今すぐ購入」ボタンが付いています。

私が何を言っているのか理解できない場合は、このページに同様の実装があります。
http://www.23mofang.com/

最初の実装は次のようです。 jqueryで実装する必要があるのでしょうか?あまり確信はありませんが、少なくともページ上の CSS に関する手がかりは見当たりません。
使用経験のある方、アドバイスを頂ければ幸いです。もちろん、ヘルプドキュメントを提供していただければ大変助かります。


ディスカッションへの返信 (解決策)

すべては CSS と組み合わせた jQuery によって行われます
1. セカンダリ ナビゲーション バー、位置: ブラウザ ウィンドウを基準にして絶対位置が固定されています。スクロール バーの位置が第 1 レベルのナビゲーション バーの高さより大きい場合、第 2 レベルのナビゲーション バーの上部の値が 0 になるようにします。すりガラス効果ではありませんが、白い背景レイヤーの 90 % の透明度

はすべて、CSS と組み合わせた jQuery によって行われます

1. セカンダリ ナビゲーション バー、位置: 固定。ブラウザウィンドウを基準にして絶対的に配置されます。スクロール バーの位置が第 1 レベルのナビゲーション バーの高さより大きい場合、第 2 レベルのナビゲーション バーの上部の値が 0 になるようにします。曇りガラス効果ではなく、白い背景レイヤーの透明度 90 %

こんにちは、2 番目の質問について詳しく質問したいのですが、色を設定した後にわかりました。背景レイヤーの値、


はすべて CSS
1 で完成されたセカンダリ ナビゲーション バー、位置: ブラウザ ウィンドウを基準とした絶対的な位置に固定されています。スクロールバーの位置が第1レベルのナビゲーションバーの高さより大きい場合、第2レベルのナビゲーションバーの上部の値が0になるようにします

2. jqueryはCSS3アニメーションを組み合わせ、マウスオーバーとマウスアウトでクラスを切り替えることで実現しています。すりガラス効果ではなく、透明度90%の白背景レイヤーです

よろしくお願いします。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。