参考资料：

　　贤心博客：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;

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

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

  1. 2015.10.11（js判断鼠标进入容器的方向）

    判断鼠标进入容器的方向 1.前几天在万圣节专题项目中用到了鼠标坐标page事件,随着鼠标背景图片移动形成有层次感的效果,但page事件在IE低版本不支持,所以还要做兼容.在研究page事件同时无意中想 ...

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

    最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...

  3. jQuery插件,判断鼠标的移入移出方向

    今天用jQuery封装了一个简单的插件,判断鼠标的移入移出方向,以后的项目中可能还会遇到这样一个简单的效果,就记录下来吧! 先看结构和样式: <!DOCTYPE html> <htm ...

  4. JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题

    1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...

  5. 关于js判断鼠标移入元素的方向--解释

    一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...

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

    一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...

  7. JS判断鼠标从什么方向进入一个容器

    偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...

  8. js判断鼠标进入以及离开容器的方向

      (注:以下代码涉及到jQuery,建议前端大牛绕路~~~) 1.遇到的问题      如图当鼠标右箭头位置上下移动的时候  下面的城市列表容器不能隐藏. 2.方法: 网上搜了些前端大牛们的解决办法 ...

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

      前  言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...

随机推荐

  1. UVA - 1328 Period（循环节kmp）

    https://vjudge.net/problem/UVA-1328 题意 求每个前缀的最小循环节,要求至少循环两次且为完整的. 分析 求next数组,i-next[i]即为前缀i的最小循环节,再判 ...

  2. HDU 1014(互质数 **)

    题意是说从 0 开始每次增加 STEP,然后模 MOD 得到一些数,问是否能得到从 0 到 MOD - 1 的所有数. 只要 STEP 与 MOD 互质就可以满足条件,也就是二者的最大公因数为 1 即 ...

  3. scoketserver模块(TCP协议 与 udp 协议)

    socketserver模块 ( 基于 TCP 协议 ) import socketserver # 自定义类用来处理通信循环 class MyTCPhanler(socketserver.BaseR ...

  4. vee-validate表单验证组件

    vee-validate是VUE的基于模板的验证框架,允许您验证输入并显示错误 安装 npm i vee-validate --save 引入 import Vue from 'vue'; impor ...

  5. 【六】Hystrix Dashboard

    除了隔离依赖服务的调用以外,Hystrix还提供了准实时的调用监控(Hystrix Dashboard) , Hystrix会持续地记录所有通过 Hystrix发起的请求的执行信息,并以统计报表和图形 ...

  6. 二十八、Linux 进程与信号---前台进程组

    28.1 介绍 28.1.1 概念 自动接受终端信号的组称为前台进程组 在终端通过 ctrl + c 等动作产生的信号首先被前台进程组接受 在 shell 启动的若干个进程组默认是父进程所在的组为前台 ...

  7. 【poj1741】Tree 树的点分治

    题目描述 Give a tree with n vertices,each edge has a length(positive integer less than 1001). Define dis ...

  8. PHP中的会话控制—session和cookie(实现数据传值功能)

    1.session  登录上一个页面以后,长时间没有操作,刷新页面以后需要重新登录. 特点:(1)session是存储在服务器:   (2)session每个人(登陆者)存一份: (3)session ...

  9. iOS: 并发编程的几个知识点

    iOS 多线程问题 查阅的大部分资料都是英文的,整理完毕之后,想翻译成中文,却发现很多名字翻译成中文很难表述清楚. 所以直接把整理好的资料发出来,大家就当顺便学习学习英语. 1. Thread Saf ...

  10. [C++]环状序列(CircularSequence,ACM/ICPC Seoul 2004,UVa1584)

    Question 例题3-5 环状序列(CircularSequence,ACM/ICPC Seoul 2004,UVa1584) 长度为n的环状串有n种表示方法,分别为从某个位置开始顺时针得到,在这 ...