判断鼠标移入移出方向（二）-----获取鼠标移入方向

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33744228/article/details/80404262

第二部分内容，这里也列出思路，方便承接第一部分。

思路

1：给li绑定鼠标移入移出事件
2：获取鼠标移入的位置（有用）,例:(x,y)
3：获取图片距离浏览器的位置（有用），top，left，height+top,left+width看到这个你们应该就理解了
4：将鼠标坐标与图片距离浏览器的位置相减，例如 x-top,x-(height+top)…等等后面详细讲
5：通过差值获取到最小值，这个最小值就是判断从那个方向移入移出的关键
6：获取到了方向，就开始释放你的想象写想要的动画吧

2、3、4、5 获取方式如下代码（我也注释了相应操作）

	var oBox = document.getElementById('box')
	var oLi = document.getElementsByTagName('li');

	oBox.addEventListener('mouseenter',function (e){
		if (e.target.tagName.toLowerCase() == "li") {
			move(e)                   // 这里将获取的方法重新封装一个move方法
		 }
	},true)
	function move(e) {
		var e = e || window.event
		var target = e.target
		//获取鼠标x,y坐标
		var x = e.clientX
		var y = e.clientY
		//获取图片距离浏览器位置
		var t = target.offsetTop
		var b = t + target.offsetHeight
		var l = target.offsetLeft
		var r = l + target.offsetWidth
		//获取鼠标与图片距离浏览器位置的差值（注意有负值，需要绝对值 Math.abs）
		var chaYT = Math.abs(y - t)
		var chaYB = Math.abs(y - b)
		var chaXL = Math.abs(x - l)
		var chaXR = Math.abs(x - r)
		//取得最小值
		var min = Math.min(chaYT, chaYB, chaXL, chaXR)
		//判断方向
		switch(min){
			case chaYT:
				console.log('上')            
				break;
			case chaYB:
				console.log('下')
				break;
			case chaXL:
				console.log('左')
				break;
			case chaXR:
				console.log('右')
		}
	}

到了这里就已经获取到了差值，并且通过这个差值判断鼠标移入的方向；

6.case中可以放入你封装好的动画

我的动画就是动态改变css,与animate。你们可以更具需求对号入座。感谢你很有耐心的看完我写的，如有问题可以联系我，或者有更好的办法，可以在评论区指点

传送门：详解判断鼠标从四周移入移出的方向（一）