学习慕课网https://www.imooc.com/learn/829学习js实现京东无延迟菜单效果。
首先是主页目录设置。
-
家用电器
-
手机 / 运营商 / 数码
-
电脑办公 / 办公
-
家居 / 家具 / 家装 / 厨具
-
男装 / 女装 / 童装 / 内衣
-
美妆个护 / 宠物
-
女鞋 / 箱包 / 钟表 / 珠宝
-
男鞋 / 运动 / 户外
-
汽车 / 汽车用品
注意二级菜单设置隐藏类,测试时候,可以先把“none”,例如
中的 none去掉。
设置JS,进行二级菜单的显示。新建js脚本文件megadropdown.js,帮助理解,注释中按照1,2,3 的顺序理解代码。
分别是1:显示隐藏的二级菜单。
2:加入延迟300毫秒,
3.优化点击菜单预测。
$(document).ready(function(){/*错误一document写错。*/
var sub= $ ('#sub') /*1申明变量指向二级菜单*/
/*1定义变量一级菜单中行,以及菜单*/
var activeRow
var activeMenu
/*2在显示二级菜单后,进行延迟问题处理,加入变量时间*/
var timer
//2鼠标在子菜单里
var mouseInsub = false
/*最终优化问题3*/
//3给鼠标位置设置相关的数组
var mouseTrack = []
var moveHanlder = function(e){
//3利用push属性获得鼠标相对于页面的坐标
mouseTrack.push({
x: e.pageX,
y: e.pageY
})
//3保存有限个数组信息就好
if(mouseTrack.length>3)
{
mouseTrack.shift()
}
}
//1给鼠标把绑定事件
sub.on('mouseenter',function(e){
mouseInsub = true//进入
}).on('mouseleave',function(e){
mouseInsub = false//离开
})//1之后再进行第二次菜单栏时候,需要if判断
$('#test')
.on('mouseenter',function(e){
/*1指向一级菜单*/
sub.removeClass('none')
$(document).bind('mousemove',moveHanlder)
})
.on('mouseleave',function(e){
sub.addClass('none')
if (activeRow){
activeRow.removeClass('active')
activeRow =null
/*1如果存在行,去掉,置空*/
}
/*1对于对应的二级菜单同样操作*/
if(activeMenu){
activeMenu.addClass('none')
activeMenu = null
}
//3数组,处理时避免影响其他
$(document).unbind('mousemove',moveHanlder)
})/*鼠标指示时候显示,离开的时候隐藏*/
/*2为一级菜单中列表绑定事件。采用事件代理方式。利用事件冒泡*/
.on('mouseenter','li',function(e){
if(!activeRow)
{
activeRow = $(e.target).addClass('active')
activeMenu = $('#' + activeRow.data('id'))
activeMenu.removeClass('none')
return
}
/*2处理问题2去抖动。如果进行频繁的操作,进行处理使其只执行最后一次*/
//计时器没有执行时候,清理,在计时器算法结束时设置 timer=null
//debounce去抖,事件频繁被触动时,只执行最后一次。这里没有他的具体算法,只有大致原理
//53行和78行,设置if(timer)函数。
if (timer)
{
clearTimeout(timer)
}
/*3三角形区域各点坐标*/
var currMousePos = mouseTrack[mouseTrack.length - 1]
var leftCorner = mouseTrack[mouseTrack.length - 2]
var delay = needDelay(sub, leftCorner,currMousePos)
//3333333
if (delay){
//3进行下一项菜单栏
//在返回return后,设置延迟300毫秒,设置一个缓冲期,当鼠标还在当前子菜单时,不会进行下一
//命令。同时声明鼠标变量正在子菜单里,用setTimeout来设置延迟。
timer = setTimeout(function(){
/*2如果在上一菜单子菜单里,不处理立即返回*/
if(mouseInsub){
return
}
/*1从一级菜单到二级菜单,需要清除上一列*/
activeRow.removeClass('active')
activeMenu.addClass('none')
/*1指向当前*/
activeRow = $ (e.target)
activeRow.addClass('active')
activeMenu = $('#' + activeRow.data('id'))
activeMenu.removeClass('none')/*1*/
timer = null //2去抖动时候,设置timer为null,保障执行鼠标最后停留位置
},300)
}else{
//3这是最后指向下一菜单。
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')
}
})
})
新建functions.js脚本,利用三角形数组,优化预测鼠标指向,是最后3优化步骤。
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
}
/* 二级菜单页面(B, C)最上,最下方坐标*/
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)
}
结束。