$(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);
activeRow.addClass("active");
activeMenu=$("#"+activeRow.data("id"));
activeMenu.removeClass("none");
return f;
}
if(timer){
clearTimeout(timer);//不能理解debunce
}
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){//300毫秒之后，如果鼠标在二级菜单里面，就不执行
return false;
}
//去掉上一个li的active&把对应的二级菜单隐藏
activeRow.removeClass("active");
activeMenu.addClass("none");
//为当前li的添加active&把对应的二级菜单显示
activeRow=$(e.target);
activeRow.addClass("active");
activeMenu=$("#"+activeRow.data("id"));
activeMenu.removeClass("none");
timer=null;
},300);
}
else{
var preActiveRow=activeRow;
var preActiveMenu=activeMenu;
activeRow=$(e.target);
activeRow.addClass("active");
preActiveRow.removeClass("active");
preActiveMenu.addClass("none");
activeMenu=$("#"+activeRow.data('id'));
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){//p是当前鼠标位置，a是鼠标的上一个位置
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();//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);
}
//推荐一个有关叉乘的链接
希望能帮助到大家（一定要自己敲呦）
