實現效果：

成都地區優秀IDC服務器托管提供商(創新互聯建站).為客戶提供專業的四川主機托管,四川各地服務器托管,四川主機托管、多線服務器托管.托管咨詢專線：028-86922220

實現效果如下圖所示

實現原理：

什么是筋斗云效果：

•這個效果很簡單,就是鼠標移到其他導航目錄時會有背景圖片跟著鼠標滑動到當前的目錄。

實現思路：

•鼠標經過的時候，利用offsetLeft獲得當前盒子距離左側的距離，把這個值賦給緩動動畫的end值。
•當點擊的時候記住當前的offsetLeft值，當鼠標經過的時候把之前點擊的offsetLeft給現在經過時候的值。

實現代碼：

下面是實現代碼以及詳細注釋，核心設置一個position為absolute的span標簽，通過綁定鼠標事件，用封裝好的animate動畫實現span的“筋斗云”效果。

  
  
  



  
  

    
菜單欄1
    
菜單欄2
    
菜單欄3
    
菜單欄4
    
菜單欄5
  



 

總結

以上所述是小編給大家介紹的JavaScript實現精美個性導航欄筋斗云效果，希望對大家有所幫助！