JS判断鼠标移入元素的方向

Posted 最骚的就是你

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS判断鼠标移入元素的方向相关的知识，希望对你有一定的参考价值。

技术分享
最终效果

这里的关键主要是判断鼠标是从哪个方向进入和离开的

$("li").on("mouseenter mouseleave",function(e) {
           var w = this.offsetWidth;
           var h = this.offsetHeight;
           var x = e.pageX - this.getBoundingClientRect().left - w/2;
           var y = e.pageY - this.getBoundingClientRect().top - h/2;
           var direction = Math.round((((Math.atan2(y, x) * 180 / Math.PI) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
           var eventType = e.type;
           var res = Math.atan2(y, x) / (Math.PI / 180) + 180 ;
           $(‘.line‘).css(‘transform‘,‘rotate(‘+ res +‘deg)‘);

           // console.log(((Math.atan2(y, x) * 180 / Math.PI) + 180));
           // console.log(Math.round((Math.atan2(y, x) / (Math.PI / 180) + 180) / 90 + 3) % 4);
           var dirName = new Array(‘上方‘,‘右侧‘,‘下方‘,‘左侧‘);

               $(‘.res‘).text(res + ‘deg‘);

           if(eventType == ‘mouseenter‘){
              $(‘.res‘).text(dirName[direction]+‘进入‘);
              animationIn(direction);
          }else{
              $(‘.res‘).text(dirName[direction]+‘离开‘);
              animationOut(direction);
          }
      });

demo
上面代码的重点主要是在direction的值的计算
Math.atan2(y,x) 返回-PI 到 PI 之间的值(负180°到正180°)，是从 X 轴正向逆时针旋转到点 (x,y) 时经过的角度 这里的结果是一个弧度值。那如何把这个值转换为角度呢
我们可以先算出一个角度的弧度值(Math.PI / 180) ，然后用上面计算出来的结果除以一度的弧度值

技术分享
 

从上图可以看出，当鼠标从右边进入的时候，角度是在-45°~45°之间的 底部是45~135 左边135~180&-180~-135 顶部是 -135 ~ -45
因为上面计算出来的结果不符合我们的习惯，并且负值在计算的时候会影响正确性，现在我们给这个结果加上180 让角度范围变成我们习惯的0~360°。当加上180之后 0°的位置就在左边的中间了

技术分享
0度的位置

所以现在的范围变成了
0~44 & 360~315 左边
45~134 上边
135~224 右边
225~314 下边
我们再继续转换，现在我们把算出来的角度除以90，然后四舍五入，可以使得45°为分界线
上边算出来的结果为1

技术分享
上边


右边算出来的结果为2

技术分享
右边


下边算出来的结果为3

技术分享
下边


左边算出来的结果有两种 0~44肯定是为0的 315~360 为4

技术分享
下边


现在算出来的结果一共有5个值（左边2个，其他三个面各一个）。下面我们再精简一下结果，我们给每次的结果都加上3，然后和4取余
左边加3之后就是3和7，然后取余后为3
上边加3之后为4，取余后为0
右边加3为5，取余为1
下边加3为6，取余为2
我们最终的结果就是 0->上边 1->右边 2->下边 3->左边 然后我们通过控制left和top就可以实现上面的效果了

 

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			html,
			body {
				width: 100%;
				height: 100%;
			}
			
			ul {
				list-style: none;
				position: relative;
				width: 600px;
				width: 100%;
			}
			
			ul> li {
				margin: 50px auto;
				position: relative;
				width: 300px;
				height: 300px;
				background-color: black;
				overflow: hidden;
			}
			
			ul> li .bg {
				position: absolute;
				width: 300px;
				height: 300px;
				left: -100%;
				top: 0;
				background-color: red;
				text-align: center;
				line-height: 300px;
				color: blue;
				font-size: 150px;
			}
			
			.line {
				position: absolute;
				width: 50%;
				height: 1px;
				background: red;
				right: 0;
				top: 50%;
				transition: all .3s;
				transform-origin: left;
			}
			
			.res {
				text-align: center;
			}
		</style>
	</head>

	<body>
		<ul>
			<li>
				<div class="bg">
					SB
				</div>
			</li>
		</ul>
		<div class="res"></div>
		<script src="js/jquery-3.1.1.js"></script>
		<script>
			$("li").on("mouseenter mouseleave", function(e) {
				var $bg = $(this).find(‘.bg‘);
				var w = this.offsetWidth; //获取元素宽度
				var h = this.offsetHeight; //获取元素高度
				var toTop = this.getBoundingClientRect().top + document.body.scrollTop; //兼容滚动条
				var x = e.pageX - this.getBoundingClientRect().left - w / 2; //获取当前鼠标的x轴位置（相对于这个li的中心点）
				var y = e.pageY - toTop - h / 2; ////获取当前鼠标的y轴位置（相对于这个li的中心点）

				var direction = Math.round((((Math.atan2(y, x) * 180 / Math.PI) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
				var eventType = e.type;
				var res = Math.atan2(y, x) / (Math.PI / 180) + 180;
				$(‘.line‘).css(‘transform‘, ‘rotate(‘ + res + ‘deg)‘);

				var dirName = new Array(‘上方‘, ‘右侧‘, ‘下方‘, ‘左侧‘);

				if(eventType == ‘mouseenter‘) {
					$(‘.res‘).text(dirName[direction] + ‘进入‘);
					animationIn(direction, $bg);
				} else {
					$(‘.res‘).text(dirName[direction] + ‘离开‘);
					animationOut(direction, $bg);
				}
			});

			function animationIn(direction, ele) {

				switch(direction) {
					case 0:
						ele.css({
							left: 0,
							top: ‘-100%‘
						}).animate({
							top: 0
						}, 300);
						break;
					case 1:
						ele.css({
							left: ‘100%‘,
							top: 0
						}).animate({
							left: 0
						}, 300);
						break;
					case 2:
						ele.css({
							left: 0,
							top: ‘100%‘
						}).animate({
							top: 0
						}, 300);
						break;
					case 3:
						ele.css({
							left: ‘-100%‘,
							top: 0
						}).animate({
							left: 0
						}, 300);
						break;
				}
			}

			function animationOut(direction, ele) {
				switch(direction) {
					case 0:
						ele.animate({
							top: ‘-100%‘
						}, 300);
						break;
					case 1:
						ele.animate({
							left: ‘100%‘
						}, 300);
						break;
					case 2:
						ele.animate({
							top: ‘100%‘
						}, 300);
						break;
					case 3:
						ele.animate({
							left: ‘-100%‘
						}, 300);
						break;
				}

			}
		</script>

	</body>

</html>

　　

 



























以上是关于JS判断鼠标移入元素的方向的主要内容，如果未能解决你的问题，请参考以下文章

比如一个div元素,当鼠标mouseover事件触发时,我想知道从上左下右哪个方向移入进去的.

vue中鼠标移入移出，怎么让其切换到里面的内容

jquery鼠标移入移出

鼠标移入移出方向判断

判断鼠标的移入方向

判断鼠标移入方向