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

参考资料：

　　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;

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

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

2015.10.11（js判断鼠标进入容器的方向）
判断鼠标进入容器的方向 1.前几天在万圣节专题项目中用到了鼠标坐标page事件,随着鼠标背景图片移动形成有层次感的效果,但page事件在IE低版本不支持,所以还要做兼容.在研究page事件同时无意中想 ...
JS判断鼠标移入元素的方向
最终效果这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...
jQuery插件,判断鼠标的移入移出方向
今天用jQuery封装了一个简单的插件,判断鼠标的移入移出方向,以后的项目中可能还会遇到这样一个简单的效果,就记录下来吧! 先看结构和样式: <!DOCTYPE html> <htm ...
JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
关于js判断鼠标移入元素的方向--解释
一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...
关于js判断鼠标移入元素的方向——上下左右
一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...
JS判断鼠标从什么方向进入一个容器
偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...
js判断鼠标进入以及离开容器的方向
(注:以下代码涉及到jQuery,建议前端大牛绕路~~~) 1.遇到的问题如图当鼠标右箭头位置上下移动的时候下面的城市列表容器不能隐藏. 2.方法: 网上搜了些前端大牛们的解决办法 ...
js中判断鼠标滚轮方向的方法
前言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...

随机推荐

HDU 1025(最长上升子序列)
题意是要在两条平行线间连点,要在线不交叉的前提下尽可能多的连线,问最多能连多少条线. 现假定题中所给的是 9 组点,分别是:1—3,2—8,3—5,4—9,5—2,6—4,7—6,8—7,9—1,如图 ...
docker 系列 - Docker CheatSheet | Docker 配置与实践清单 (转载)
本文转载自 (https://segmentfault.com/a/1190000016447161), 感谢作者.
MySQL-5.7数据库主从同步实战教程
主从形式 MySQ主从复制原理(主库写入数据,从库读取数据) MySql常用命令: MySQL5.7设置密码 ') where user='root': MySQL5.6设置密码 ') WHERE U ...
VS WebDev.WebServer40
vs2010下有一个WebDev.WebServer40工具,可以直接拿来当服务器用,这样就不用再安装iis了.位置在 C:\Program Files (x86)\Common Files\micr ...
luogu 2827 蚯蚓单调队列/优先队列
易知可利用优先队列选取最大值: 但是通过分析可知,先取出的蚯蚓分开后仍然要比后分的长,所以可直接利用单调队列找队头即可,分三个单调队列,分别找未切割,切割,切割2三种情况 #include<bi ...
CSS 快速学习
[快速学习让我不再思考太多,更多专注在一个 box 当中,上下文朝着正交方向前进~] [Think small,]https://learnxinyminutes.com/docs/zh-cn/css ...
springboot12-zuul
Zuul 相当于是设备和 Netflix 流应用的 Web 网站后端所有请求的前门,提供动态路由,监控,弹性,安全等的边缘服务所有请求都经过网关(API Gateway)zuul,然后转发到各个子服 ...
ROIAlign, ROIPooling及ROIWarp对比
RoI Pooling 实现从原图ROI区域映射到卷积区域最后pooling到固定大小的功能,然后通过池化把该区域的尺寸归一化成卷积网络输入的尺寸. ROIAlign 上面RoI Pooling从原图 ...
Linux之Ubuntu添加/移除个人软件包存档的源[PPA,Personal Package Archives]
现在很多第三方软件还需要添加PPA软件源到Ubuntu系统当中,但是添加了PPA之后,软件可以直接在软件中心进行安装并会自动提示升级,这就是Ubuntu带来的方便,现在我们就来看看如何添加PPA软件源 ...
转载-reduceByKey和groupByKey的区别
原文链接-https://www.cnblogs.com/0xcafedaddy/p/7625358.html 先来看一下在PairRDDFunctions.scala文件中reduceByKey和g ...

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

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

随机推荐

热门专题