我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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

实现效果:

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

实现效果如下图所示

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

实现原理:

什么是筋斗云效果:

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

实现思路:

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

实现代码:

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




  导航栏筋斗云效果
  
  


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

总结

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


当前题目:JavaScript实现精美个性导航栏筋斗云效果
文章来源:http://shouzuofang.com/article/jpojgo.html

其他资讯