这是一个js实现京东无延迟菜单效果，感觉很好，分享给大家...
先来理清思路:
1.开发基本的菜单结构
2.开发普通的二级菜单效果
3.假如延迟解决移动问题，切换子菜单时候，用setTimeout设置延迟
debounce去抖技，在事件被频繁触发是，只执行一次处理
4.解决延迟引入的新问题
跟踪鼠标的移动，用鼠标当前位置，和鼠标上一次位置与子菜单上下边缘的三角形区域进行比较
运用到向量
二位向量叉乘公式
用叉乘法判断点在三角形内
最终效果：鼠标自然的移动和点击到子菜单
切换时无延迟
下面开始代码：
开发基本的菜单结构
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>京东菜单无刷新</title> <script src="/UploadFiles/2021-04-02/jquery-1.7.2.min.js">解决第2、3个问题
$(document).ready(function(){ var sub = $('#sub') var activeRow var activeMenu var timer var mouseInSub = false sub.on('mouseenter',function(e){ mouseInSub = true }).on('mouseleave',function(e){ mouseInSub = false }) var mouseTrack = [] var moveHandler = function(e){ mouseTrack.push({ x:e.pageX, y:e.pageY }) if(mouseTrack.length > 3){ mouseTrack.shift() } } $('#test') .on('mouseenter',function(e){ sub.removeClass('none') $(document).bind('mousemove',moveHandler) }) .on('mouseleave',function(e){ sub.addClass('none') if(activeRow){ activeRow.removeClass('active') activeRow = null; } if(activeMenu){ activeMenu.addClass('none') activeMenu = null; } //解绑 $(document).unbind('mousemove',moveHandler) }) .on('mouseenter','li',function(e){ if(!activeRow){ activeRow = $(e.target).addClass('acrive') activeMenu = $('#'+activeRow.data('id')) activeMenu.removeClass('none') return } //清除 if(timer){ clearTimeout(timer) } //鼠标当前坐标 var currMousePos = mouseTrack[mouseTrack.length - 1] //上次的坐标 var leftCorner = mouseTrack[mouseTrack.length-2] var delay = needDelay(sub,leftCorner,currMousePos) if(delay){ // 时间触发，设置一个缓冲期 timer = setTimeout(function(){ //判断 if(mouseInSub){ return } activeRow.removeClass('active') activeMenu.addClass('none') activeRow = $(e.target) activeRow.addClass('active') activeMenu = $('#'+ activeRow.data('id')) activeMenu.removeClass('none') timer = null }, 300) }else{ var prevActiveRow = activeRow var prevActiveMenu = activeMenu activeRow = $(e.target) activeMenu = $('#' + activeRow.data('id')) prevActiveRow.removeClass('active') prevActiveMenu.addClass('none') activeRow.addClass('active') activeMenu.removeClass('none') } }) })解决延迟引入的新问题
function sameSign(a,b){ return (a ^ b) >= 0 } function vector(a,b){ return{ x:b.x - a.x, y:b.y - a.y } } function vectorProduct(v1,v2){ return v1.x * v2.y - v2.x * v1.y } function isPointInTrangle(p,a,b,c){ var pa = vector(p,a) var pb = vector(p,b) var pc = vector(p,c) var t1 = vectorProduct(pa,pb) var t2 = vectorProduct(pb,pc) var t3 = vectorProduct(pc,pa) return sameSign(t1,t2) && sameSign(t2,t3) } function needDelay(elem,leftCorner,currMousePos){ var offset = elem.offset() var topLeft = { x:offset.left, y:offset.top } var bottomLeft = { x:offset.left, y:offset.top + elem.height() } return isPointInTrangle(currMousePos,leftCorner,topLeft,bottomLeft) }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。