微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Js实现京东无延迟菜单效果实例(demo)

这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家...

先来理清思路:

1.开发基本的菜单结构

2.开发普通的二级菜单效果

3.假如延迟解决移动问题,切换子菜单时候,用setTimeout设置延迟

debounce去抖技,在事件被频繁触发是,只执行一次处理

4.解决延迟引入的新问题

跟踪鼠标的移动,用鼠标当前位置,和鼠标上一次位置与子菜单上下边缘的三角形区域进行比较

运用到向量

二位向量叉乘公式

用叉乘法判断点在三角形内

最终效果

鼠标自然的移动和点击到子菜单

切换时无延迟

下面开始代码

开发基本的菜单结构

rush:xhtml;"> <Meta charset="UTF-8"> 京东<a href="https://www.jb51.cc/tag/caidan/" target="_blank" class="keywords">菜单</a>无刷新

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐