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

最新推荐文章于 2023-03-13 16:07:55 发布

weixin_34341229

最新推荐文章于 2023-03-13 16:07:55 发布

阅读量410

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5abf8a426fb9a028dd4e5b47

版权

效果演示：

思路详解

把元素框分成如下四部分：

只要能判断出鼠标移入移出时属于哪个部分的范围内，问题即可解决。而这个判断可通过斜率，结合鼠标的位置与元素框中心点的位置比较得出。这个判断原理，采用下面的坐标系图解来说明。

解决这个问题，建立如下图坐标系：

1）上图以浏览器可视区域左上角为原点建立坐标系，坐标系与数学坐标系方向一致，往右表示x轴正方向，往下表示y轴负方向；

2）图中点(x1,y1)代表元素框左上角，(x4,y4)代表元素框右下角，(x0,y0)代表元素框的中心点，（x,y）表示鼠标移入移出时与元素框的边的交点；

3）根据下面的公式：

可得(x1,y1)与（x4,y4)这条对角线的斜率为 k = (y1-y4)/(x1-x4)。由于对称性，元素框另外一条对角线的斜率一定是 -k。

同时由于(x1,y1)与（x4,y4)这条对角线在坐标系中一定经过的是第二和第四象限，所以k肯定是负值，而 -k一定是正值。

4）根据同样的公式，当鼠标移入移出时的瞬间，与元素边框的交点与元素框中心点的斜率 k1 = (y-y0)/(x-x0)。

5）由图可知，当 k < k1 < –k时，鼠标一定是从元素的左右方向移动的；反之，一定是从上下方向移动的。

当鼠标是从左右方向移动时，如果x > x0，那么鼠标就是从右边移动的，反之就是从左边移动的；

当鼠标是从上下方向移动时，如果y > y0时，那么鼠标就是从上边移动的，反之就是从下边移动的。

** 注意：坐标系中所有的y值都是负的。 **

以上便是这个问题，我提供的解决思路，通过上面的图解说明，相信大家理解起来会比较容易。如果查看我提供的代码实现demo1.js，会发现代码的逻辑，跟上面的图解说明也是一致的。当然这个思路只是解决如何判断鼠标移入移出的方向问题，demo中的效果实现最后还得要借助css 过渡才行，不过这个部分就更简单了，详细代码可见demo1.html的源码，逻辑非常简单，这里就不再详细说明了。

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>鼠标移入移出方向判断</title>
		<style>
			body,
			html,
			ul,
			p,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				margin: 0;
				padding: 0;
			}
			
			ul {
				list-style: none;
			}
			
			body {
				padding-top: 100px;
				text-align: center;
			}
			
			.box {
				box-sizing: border-box;
				width: 300px;
				height: 200px;
				margin: 10px auto;
				border: 1px solid #ccc;
				position: relative;
				overflow: hidden;
				display: inline-block;
			}
			
			.content {
				position: absolute;
				z-index: 2;
				background-color: red;
				width: 100%;
				height: 100%;
				left: -100%;
				top: -100%;
				line-height: 200px;
				text-align: center;
				color: #fff;
				font-size: 70px;
			}
			
			.content.trans {
				transition: all .2s;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<div class="content">
				1
			</div>
		</div>
		<div class="box">

			<div class="content">
				2
			</div>
		</div>
		<div class="box">

			<div class="content">
				3
			</div>
		</div>
		<div class="box">

			<div class="content">
				4
			</div>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			//这个模块完成鼠标方向判断的功能
			var MouseDirection = function(element, opts) {

				var $element = $(element);

				//enter leave代表鼠标移入移出时的回调
				opts = $.extend({}, {
					enter: $.noop,
					leave: $.noop
				}, opts || {});

				var dirs = ['top', 'right', 'bottom', 'left'];

				var calculate = function(element, e) {
					/*以浏览器可视区域的左上角建立坐标系*/

					//表示左上角和右下角及中心点坐标
					var x1, y1, x4, y4, x0, y0;

					//表示左上角和右下角的对角线斜率
					var k;

					//用getBoundingClientRect比较省事，而且它的兼容性还不错
					var rect = element.getBoundingClientRect();

					if(!rect.width) {
						rect.width = rect.right - rect.left;
					}

					if(!rect.height) {
						rect.height = rect.bottom - rect.top;
					}

					//求各个点坐标 注意y坐标应该转换为负值，因为浏览器可视区域左上角为(0,0)，整个可视区域属于第四象限
					x1 = rect.left;
					y1 = -rect.top;

					x4 = rect.left + rect.width;
					y4 = -(rect.top + rect.height);

					x0 = rect.left + rect.width / 2;
					y0 = -(rect.top + rect.height / 2);

					//矩形不够大，不考虑
					if(Math.abs(x1 - x4) < 0.0001) return 4;

					//计算对角线斜率
					k = (y1 - y4) / (x1 - x4);

					var range = [k, -k];

					//表示鼠标当前位置的点坐标
					var x, y;

					x = e.clientX;
					y = -e.clientY;

					//表示鼠标当前位置的点与元素中心点连线的斜率
					var kk;

					kk = (y - y0) / (x - x0);

					//如果斜率在range范围内，则鼠标是从左右方向移入移出的
					if(isFinite(kk) && range[0] < kk && kk < range[1]) {
						//根据x与x0判断左右
						return x > x0 ? 1 : 3;
					} else {
						//根据y与y0判断上下
						return y > y0 ? 0 : 2;
					}
				};

				$element.on('mouseenter', function(e) {
					var r = calculate(this, e);
					opts.enter($element, dirs[r]);
				}).on('mouseleave', function(e) {
					var r = calculate(this, e);
					opts.leave($element, dirs[r]);
				});
			};
		</script>
		<script>
			var DIR_POS = {
				left: {
					top: '0',
					left: '-100%'
				},
				right: {
					top: '0',
					left: '100%'
				},
				bottom: {
					top: '100%',
					left: '0'
				},
				top: {
					top: '-100%',
					left: '0'
				}
			};

			$('.box').each(function() {
				new MouseDirection(this, {
					enter: function($element, dir) {
						//每次进入前先把.trans类移除掉，以免后面调整位置的时候也产生过渡效果
						var $content = $element.find('.content').removeClass('trans');

						//调整位置
						$content.css(DIR_POS[dir]);

						//reflow
						$content[0].offsetWidth;

						//启用过渡
						$content.addClass('trans');

						//滑入
						$content.css({
							left: '0',
							top: '0'
						});
					},
					leave: function($element, dir) {
						$element.find('.content').css(DIR_POS[dir]);
					}
				});
			});
		</script>
	</body>

</html>
复制代码

weixin_34341229

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS判断鼠标移入移出元素时的方向

效果演示：思路详解把元素框分成如下四部分：只要能判断出鼠标移入移出时属于哪个部分的范围内，问题即可解决。而这个判断可通过斜率，结合鼠标的位置与元素框中心点的位置比较得出。这个判断原理，采用下面的坐标系图解来说明。解决这个问题，建立如下图坐标系：1）上图以浏览器可视区域左上角为原点建立坐标系，坐标系与数学坐标系方向一致，往右表示x轴正方向，往下表示y轴负方向；2）图中点(x...
复制链接

扫一扫