判断鼠标进入容器的方向小Demo

参考资料:

  贤心博客:http://sentsin.com/web/112.html,

  Math.atan2(y,x) 解释 :http://www.w3school.com.cn/jsref/jsref_atan2.asp;

Demo: Demo

截图:

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<title>Document</title>
	<style>
	*{ margin:0;padding:0;}
	#box{ position: absolute;top:200px;left:200px; width:560px;height:560px;border:1px solid #999;padding:10px 0 0 10px; }
	#box div{ position: relative; float:left;width:100px;height: 100px; margin:0 10px 10px 0;border:1px solid #ccc;overflow: hidden;}
	#box div.big-box{ width:324px;}
	#box .mark{ position: absolute;left:-200px;top:-200px;width:100%;height:100%;background-color: #000; opacity: 0.5; border:none; }
	</style>
	<script src="jquery-1.8.3.min.js"></script>
	<script>
		$(function(){

			var $oBox = $(‘#box‘);
			var $aDivs = $oBox.children();
			var $aMarks = $(‘.mark‘);

			$aMarks.on(‘mouseenter‘,function(event){
				event.stopPropagation();
				return false;
			});

			$aDivs.on(‘mouseenter mouseleave‘,function( event ){

				var $this = $(this),
					$mark = $this.find(‘.mark‘),
					w = $this.width(),
					h = $this.height(),
					offset = $this.offset(),
					scaleX = w > h ? (h / w) : 1,
		        	scaleY = h > w ? (w / h) : 1,
		        	x = (event.pageX - offset.left - (w / 2)) * scaleX,
		        	y = (event.pageY - offset.top - (h / 2)) * scaleY,
		        	direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4,
		        	type = event.type;

		        if( direction == 0 ){

					if( type == "mouseenter" ){

						$mark.css({
							‘top‘  : -h,
							‘left‘ : 0
						});

						$mark.animate({
							‘top‘ : 0
						},300);

					}else{

						$mark.animate({
							‘top‘ : -h
						},300);

					}

				}else if( direction == 1 ){

					if( type == "mouseenter" ){

						$mark.css({
							‘top‘  : 0,
							‘left‘ : w
						});

						$mark.animate({
							‘left‘ : 0
						},300);

					}else{

						$mark.animate({
							‘left‘ : w
						},300);

					}

				}else if( direction == 2 ){

					if( type == "mouseenter" ){

						$mark.css({
							‘top‘  : h,
							‘left‘ : 0
						});

						$mark.animate({
							‘top‘ : 0
						},300);

					}else{

						$mark.animate({
							‘top‘ : h
						},300);

					}

				}else if( direction == 3 ){

					if( type == "mouseenter" ){

						$mark.css({
							‘top‘  : 0,
							‘left‘ : -w
						});

						$mark.animate({
							‘left‘ : 0
						},300);

					}else{

						$mark.animate({
							‘left‘ : -w
						},300);

					}

				}else{

					$mark.css({
						‘top‘  : 0,
						‘left‘ : 0
					});

				}

			});

		});
	</script>
</head>
<body>

	<div id="box">

		<div >
			<a href="#" class="mark"></a>
		</div>
		<div class="big-box">
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div>
			<a href="#" class="mark"></a>
		</div>
		<div class="big-box">
			<a href="#" class="mark"></a>
		</div>

	</div>

</body>
</html>

  

后记:

其实核心的代码都是用贤心博客里的代码,讲解的也比较清楚。

1.要知道父级容器有正方形和长方形所以要算一个比例关系,求出x,y的值;

2.Math.atan2(y, x) 返回从 x 轴到点 (x,y) 之间的角度 其实返回的是弧度然后在* 180 / Math.PI 转成角度;

3.至于+ 180) / 90) + 3) % 4  +180 是为了角度的反转,除90是平均分成四份 +3其实为了%4求出0,1,2,3;

大概的逻辑是这样,可以也有个人理解不对的方法,欢迎指出;

时间: 2024-10-10 08:12:29

判断鼠标进入容器的方向小Demo的相关文章

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

判断鼠标进入容器方向

<script src="jquery-3.2.1.min.js"></script> <script> $("#div").on("mouseenter mouseleave",function(e) { var w = $(this).width(); // 得到盒子宽度 var h = $(this).height();// 得到盒子高度 var x = (e.pageX - this.offsetLef

判断鼠标进入元素的方向

javascript版: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>判断鼠标进入和离开容器的方向</title> 6 <style> 7 #test{ 8 width:300px; 9 height:200px; 10 border:1px solid red; 11 } 12 </style&g

关于js判断鼠标移入元素的方向——上下左右

一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: 对于数学不太好的我,只能上网找下看有没有人解决了.找到了如下这段: var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.pageY - this.offsetTop - (h / 2))

判断鼠标滚轮的滚动方向

function mousewheelHandler(e){ var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); console.log(delta > 0 ? "向上滚动" : "向下滚动"); } //for Firefox document.addEventListener("DOMMouseScroll", mousewheelHandler, fa

一天一点新东西-鼠标进入容器方向判断

很久之前思考的这个东西,怎么判断鼠标是从哪个方向进入元素的?有代码和一点点解释,用法很精妙,记下来,希望以后看见能记起. index.html <!DOCTYPE html><html><head><style>#wrap{height:100px;width:100px;background-color:#000000;}</style> <script src="http://libs.baidu.com/jquery/1.1

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

本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识,但是非常简单好理解,希望能对你有所帮助. 在线demo: http://liuyunzhuge.github.io/blog/mouse_direction/demo1.html 相关代码: https://github.com/liuyunzhuge/blog/blob/master/mouse_

判断鼠标从哪个方向进入容器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>判断鼠标进入方向</title> </head> <body> <style> html,body{margin:0;padding:0;} #wrap{width:300px;height:300px;background:#33aa00;margin:50p

js中判断鼠标滚轮方向的方法

  前  言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event对象 一.JS中的Event对象 Event对象:它代表的是事件的状态,例如可以表示鼠标的位置.鼠标按钮的状态.键盘按键的状态等等. >>>事件通常与函数结合使用,函数不会在事件发生前被执行! 二.JS中如何判断鼠标滚轮方向 判断鼠标滚轮的方向,有着两个派别:一是谷歌.IE派别(这次IE没有