カプセル化を使用してフロア照明効果を実現する方法 (コード例)

この章では、カプセル化を使用してフロア照明効果を実現する方法 (コード例) を紹介します。困っている友人は参考にしていただければ幸いです。

機能要件:

1. マウスがページ コンテンツ フロアまでスクロールすると、サイド ナビゲーション フロアが表示されます。それ以外の場合は非表示になります。

2. マウスを対応するフロアまでスクロールすると、サイド ナビゲーション フロアが強調表示されます。

3. サイド ナビゲーションをクリックすると、ページが対応するフロアまでスクロールします。

以下に示すように:

技術的なポイント:

1. jquery とjs、

2. スクロールトップ( ); オフセット( )。アンカー アプリケーション

1.フロアのスクロールを点灯するプラグインの場合は、メイン ページ プログラム

2 でこのメソッドを呼び出します。 次に、プラグインを深く掘り下げて実装します。プラグインの特定の機能。

scrollsoy (options) { function }、ここではプラグインにパラメータを渡します。上の関数に示すように、オブジェクト {target: "div.affix"} は次のとおりです。つまり、サイドの追加ナビゲーション用のクラスが渡されます。この利点は、将来そのような機能が必要になる場合に限り、ターゲットの値を変更するだけで済むことです。

1. プラグインで

   ローリング イベント
を定義して、フロア スイッチを点灯します。

2. i), ウィンドウとスクロールバーの上部の間のスクロール距離を取得します, var top = $(window).scrollTop(), 判定: 今の場合 1 階より上にスクロールした場合 (上部

   3 階より下にスクロールした場合 (上部 & gt; 3 階の距離) 、サイド ナビゲーション バーを作成します。

   else では、1 階と 3 階の間に、サイドに追加のナビゲーション バーのフェードイン エフェクトを作成します。時間になったら、現在スクロールしているフロア スイッチ

   を点灯させます。
   サイド ナビゲーション バーの各フロアを移動し、ウィンドウ スクロール オフセットがどのフロアのオフセットを超えているかを確認します。

   ページ フロアのオフセットを取得するにはどうすればよいですか?上の図に示すように、ナビゲーション バーの横にある a タグの href 属性は、ページのフロア ID にバインドされています。 a タグの href 属性を通じてページ上のアンカー ポイントを取得し、offset( ).top ページ フロアのオフセットを取得します

   Judgement——top>ページ フロアのオフセットは、ウィンドウが特定のフロアまでスクロールしたことを示します。側面の追加ナビゲーション バーのフロアを強調表示します。
   プラグインでクリック イベントを定義し、側面の追加ナビゲーション バーをクリックすると、ページが対応するフロアまでスクロールします。

   
   
   まず、ハイパーリンクのデフォルト動作を防止します。

a の href 属性に従って、ページの上部から対応するフロアのオフセットを見つけます。

3. アニメーション効果を使用して、ページ本文を指定した高さまでスクロールさせます。ここで強調表示されている部分には互換性の問題があることに注意してください$('body').animate({scrollTop: offset}, 500)
   

   概要:

   この例を読めば、今後関数を実装する際に、この観点から問題を考えることができ、コードの再利用性が向上すると思います。しかし、自分でやってみて、実際の難しさを味わうことができれば、自分自身の課題を発見し、継続的に能力を向上させることができます。

以上がカプセル化を使用してフロア照明効果を実現する方法 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。