实现效果:
实现效果如下图所示
实现原理:
什么是筋斗云效果:
•这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录。
实现思路:
•鼠标经过的时候,利用offsetLeft获得当前盒子距离左侧的距离,把这个值赋给缓动动画的end值。 •当点击的时候记住当前的offsetLeft值,当鼠标经过的时候把之前点击的offsetLeft给现在经过时候的值。
实现代码:
下面是实现代码以及详细注释,核心设置一个position为absolute的span标签,通过绑定鼠标事件,用封装好的animate动画实现span的“筋斗云”效果。
总结
以上所述是小编给大家介绍的JavaScript实现精美个性导航栏筋斗云效果,希望对大家有所帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。