这是一个js实现京东无延迟菜单效果，感觉很好，分享给大家...
先来理清思路:
1.开发基本的菜单结构
2.开发普通的二级菜单效果
3.假如延迟解决移动问题，切换子菜单时候，用setTimeout设置延迟
debounce去抖技，在事件被频繁触发是，只执行一次处理
4.解决延迟引入的新问题
跟踪鼠标的移动，用鼠标当前位置，和鼠标上一次位置与子菜单上下边缘的三角形区域进行比较
运用到向量
二位向量叉乘公式
用叉乘法判断点在三角形内
最终效果：鼠标自然的移动和点击到子菜单
切换时无延迟
下面开始代码：
开发基本的菜单结构
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东菜单无刷新</title>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/mche.js"></script>
<script src="js/function.js"></script>
<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-content dt i{
width:
