前端学习之,昨日模仿的,js二级菜单无延迟仿京东

学习慕课网https://www.imooc.com/learn/829学习js实现京东无延迟菜单效果。

 

首先是主页目录设置。

 



	
		
		
		
		
		
		
		
	
	
		

前端学习之,昨日模仿的,js二级菜单无延迟仿京东_第1张图片

注意二级菜单设置隐藏类,测试时候,可以先把“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)
}

结束。

 

 

你可能感兴趣的:(前端基础,前端学习)