资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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

实现效果:

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

实现效果如下图所示

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

实现原理:

什么是筋斗云效果:

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

实现思路:

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

实现代码:

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




  导航栏筋斗云效果
  
  


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

总结

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


名称栏目:JavaScript实现精美个性导航栏筋斗云效果
文章位置:http://www.cdkjz.cn/article/jpojgo.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220