實(shí)現(xiàn)效果：

成都地區(qū)優(yōu)秀IDC服務(wù)器托管提供商(創(chuàng)新互聯(lián)建站).為客戶提供專業(yè)的四川主機(jī)托管,四川各地服務(wù)器托管,四川主機(jī)托管、多線服務(wù)器托管.托管咨詢專線：028-86922220

實(shí)現(xiàn)效果如下圖所示

實(shí)現(xiàn)原理：

什么是筋斗云效果：

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

實(shí)現(xiàn)思路：

•鼠標(biāo)經(jīng)過的時候，利用offsetLeft獲得當(dāng)前盒子距離左側(cè)的距離，把這個值賦給緩動動畫的end值。
•當(dāng)點(diǎn)擊的時候記住當(dāng)前的offsetLeft值，當(dāng)鼠標(biāo)經(jīng)過的時候把之前點(diǎn)擊的offsetLeft給現(xiàn)在經(jīng)過時候的值。

實(shí)現(xiàn)代碼：

下面是實(shí)現(xiàn)代碼以及詳細(xì)注釋，核心設(shè)置一個position為absolute的span標(biāo)簽，通過綁定鼠標(biāo)事件，用封裝好的animate動畫實(shí)現(xiàn)span的“筋斗云”效果。

  
  
  



  
  

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



 

總結(jié)

以上所述是小編給大家介紹的JavaScript實(shí)現(xiàn)精美個性導(dǎo)航欄筋斗云效果，希望對大家有所幫助！