参考资料：

　　贤心博客：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. Lost connection to MySQL server during query，MySQL设置session,global变量及网络IO与索引

    Navicat导出百万级数据时,报错:2013 - Lost connection to MySQL server during query 网上一番搜索,修改mysql如下几处配置文件即可: sel ...

  2. 致备战noip2018的勇士

    戒骄戒躁,自律当先.稳扎稳打,颗粒归仓.目标高远,落实当下.无惧将来,无畏过往.愿你们承担一份荣耀,愿你们书写一段辉煌.——致备战noip2018的你们 ——退役学姐致gryz备战中的勇士 ——lpy ...

  3. javascript在计算浮点数（小数）不准确，解决方案

    方案来自网络,实现简单,便于做加减乘除使用,由于项目临时要用记录下 如需要更加复杂的计算类库,可以考虑 math.js等知名类库 /** * floatTool 包含加减乘除四个方法,能确保浮点数运算 ...

  4. python模块之自定义模块

    模块概述 到此之前,我们都是在一个py文件里操作,接下来,我们学习模块的内容,可以从其他文件引入内容(如函数等) 1. 什么是模块 一个py文件就是一个模块,模块是一些相似功能的集合体 2. 为什么要 ...

  5. js强制将页面放到最大

    <!DOCTYPE html> <html> <head> <title></title> <script language=&quo ...

  6. matlab二维绘图学习摘要

      1.二维图形plot plot(x1,y1,x2,y2) —— 多条曲线绘图格式 plot(x,y,’s’) —— 开关格式,开关量字符串s设定曲线颜色和绘图方式,使用颜色字符串的前1~3个字母, ...

  7. 20秒教你如何写maven2的pom文件的依赖包

    所有Maven 库 需要的包 及 pom.xml 中 groupId  artifactId version 都可在这个网上收到. 例如:需要 通过 maven 在项目 中 添加 geronimo-k ...

  8. 20155324 2016-2017-2 《Java程序设计》第4周学习总结

    20155324 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 继承 面对对象中,子类继承父类,避免重复定义行为就使用继承.在Java中,继承时使用exte ...

  9. Web获取客户端物理MAC地址(ocx插件)ActiveX控件

    主要是通过ActiveX控件 从本地获取到MAC地址,传入到浏览器打开的网页中,再提交到服务器. 具体详解与步骤看文档中: 文件实例包下载 DotNetFX 文件夹附件文件:(可能安装时需用) dot ...

  10. Restful API学习Day4 - DRF版本控制和认证

    参考文档: Django REST framework基础:版本控制 Django REST framework基础:认证.权限.限制 为什么要有版本? 某些客户端 使用低版本只维护不开发新功能 v1 ...