JavaScript はパーソナライズされたナビゲーション バー効果を実装します

今回紹介するのは、パーソナライズされたナビゲーション バーの特殊効果を実装するための JavaScript です。この記事では、全能の JS でさまざまな特殊効果を実現できることがわかっています。

実装の原理:

宙返り雲効果とは:

•この効果は非常に単純です。つまり、マウスが他のナビゲーション ディレクトリに移動すると、背景画像がマウスとともに現在のディレクトリまでスライドします。

実装アイデア:

•マウスが通過するときに、offsetLeftを使用して現在のボックスから左までの距離を取得し、この値をイージングアニメーションの終了値に割り当てます。
•クリックすると、現在の offsetLeft 値を記憶し、マウスが通過するときに、前にクリックした offsetLeft にその値を与えます。

実装コード:

以下は実装コードと詳細なコメントです。中心となるのは、絶対位置を持つスパンタグを設定することで、カプセル化されたアニメーションアニメーションを使用してスパンの「宙返り雲」効果を実現します。 。

  
  
  




  
  

    
菜单栏1
    
菜单栏2
    
菜单栏3
    
菜单栏4
    
菜单栏5
  

上記の紹介を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

vue を使用してログイン検証を実装する方法

jQuery を使用して配列の重複排除と並べ替えを行う

CheckBox の選択が空かどうかを判断する方法

以上がJavaScript はパーソナライズされたナビゲーション バー効果を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。