闲暇之余看了慕课网 JS实现京东无延迟菜单效果(附慕课网视频连接: https://www.imooc.com/learn/829)
后看到了一位前辈的播客(附原播客地址:http://www.cnblogs.com/6kou/p/jd.html)
辗转反侧,狂翻百度
后研究算法,终理解其中缘由
话不多说,先附前辈代码并稍加整合(侵删):
一:原理
1.开发基本的菜单结构
2.开发普通的二级菜单效果
3.假如延迟解决移动问题
切换子菜单时候,用setTimeout设置延迟;debounce去抖技 ;在事件被频繁触发是,只执行一次处理;
4.解决延迟引入的新问题
跟踪鼠标的移动用鼠标当前位置,和鼠标上一次位置与子菜单上下边缘的三角形区域进行比较
运用到向量
二位向量叉乘公式
用叉乘法判断点在三角形内
(附算法链接:https://baike.baidu.com/item/%E5%90%91%E9%87%8F/1396519?fr=aladdin
算法: https://www.cnblogs.com/TenosDoIt/p/4024413.html)
一:HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿京东菜单无刷新导航栏</title>
<style>
.wrap{
position:relative;
width:200px;
left:50px;
top:50px;
}
ul{
padding:15px;
margin:9;
list-style:none;
background:#6c6669;
color:#ffffff;
border-right-width:0;
}
/*水平居中*/
li{
display:block;
height:30px;
line-height: 30px;
padding-left:12px;
cursor:pointer;
font-size: 14px;
position:relative;
}
/*鼠标移动上去的背景色*/
li.active{
background:#999395;
}
/*js可以很好地调用类,一般效果css实现就好*/
li span:hover{
color:#c81623;
}
/*隐藏的类*/
.none{
display: none;
}
/*二级菜单*/
#sub{
width:600px;
position: absolute;
border:1px solid #f7f7f7;
background:#f7f7f7;
box-shadow:2px 0 rgba(0,0,0,.3);
left: 200px;
top:0;
box-sizing:border-box;
margin: 0px;
padding:10px;
}
.sub-content a{
font-style:12px;
color:#666;
text-decoration:none;
}
.sub-content dd a{
border-left:1px solid #e0e0e0;
padding:0 1px;
margin:4px 0;
}
.sub-content dl {
overflow:hidden;
}
.sub-content dt{
float: left;
width:70px;
font-weight: bold;
clear:left;
position:relative;
}
.sub-content dd {
float: left;
margin-left: 5px;
border-top:1px solid #eee;
margin-bottom: 5px;
}
.sub-con