微客导航 » 文章资讯 » Js实现京东无延迟菜单效果实例(demo)

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

2024-02-21 15:57:03 150

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

先来理清思路:

1.开发基本的菜单结构

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

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

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

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

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

运用到向量

二位向量叉乘公式

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

最终效果：鼠标自然的移动和点击到子菜单

切换时无延迟

下面开始代码：

开发基本的菜单结构





京东菜单无刷新










家用电器


手机/运营商/数码


电脑办公/办公


家居/家具/家装/厨具


男装/女装/童装/内衣


美妆个护/宠物


女鞋/箱包/钟表/珠宝


男鞋/运动/户外


汽车/汽车用品






电视>


曲面电视
超薄电视
HDR电视
DLED电视


空调>


挂壁式空调
柜式空调
中央空调
以旧换新


洗衣机>


滚筒式洗衣机
洗烘一体机
波轮洗衣机
迷你洗衣机

手机通讯>: 手机对讲机以旧换新手机维修
运营商>: 合约机选号机固定电话办宽带
手机配件>: 手机壳贴膜手机存储卡数据线

电脑整机>: 笔记本游戏本平板电脑

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐