JavaScript实现精美个性导航栏筋斗云效果

实现效果：

成都地区优秀IDC服务器托管提供商(创新互联建站).为客户提供专业的四川主机托管,四川各地服务器托管,四川主机托管、多线服务器托管.托管咨询专线：028-86922220

实现效果如下图所示

实现原理：

什么是筋斗云效果：

•这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录。

实现思路：

•鼠标经过的时候，利用offsetLeft获得当前盒子距离左侧的距离，把这个值赋给缓动动画的end值。
•当点击的时候记住当前的offsetLeft值，当鼠标经过的时候把之前点击的offsetLeft给现在经过时候的值。

实现代码：

下面是实现代码以及详细注释，核心设置一个position为absolute的span标签，通过绑定鼠标事件，用封装好的animate动画实现span的“筋斗云”效果。

  
  
  



  
  

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



 

总结

以上所述是小编给大家介绍的JavaScript实现精美个性导航栏筋斗云效果，希望对大家有所帮助！