参考资料：

　　贤心博客：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. Tomcat、Weblogic、WebSphere、JBoss服务器的选择

    一.应用点 Tomcat是Apache基金会提供的Servlet容器,它支持JSP, Servlet和JDBC等J2EE关键技术,所以用户可以用Tomcat开发基于数据库,Servlet和JSP页面的 ...

  2. cmd快速设置本机ip和dns【转】

    . 参考: https://wenku.baidu.com/view/74c59947336c1eb91a375dbe.html 家里配置如下 尾部的1不要忘了 netsh interface ip ...

  3. [leetcode-120] 三角形最小路径和

    三角形最小路径和 (1过) 给定一个三角形,找出自顶向下的最小路径和.每一步只能移动到下一行中相邻的结点上. 例如,给定三角形: [ [2], [3,4], [6,5,7], [4,1,8,3] ] ...

  4. uva11916 Emoogle Grid （BSGS）

    https://uva.onlinejudge.org/external/119/p11916.pdf 令m表示不能染色的格子的最大行号 设>m行时可以染k种颜色的格子数有ck个,恰好有m行时可 ...

  5. HTTP.SYS远程执行代码漏洞分析 （MS15-034 ）

    写在前言:   在2015年4月安全补丁日,微软发布了11项安全更新,共修复了包括Microsoft Windows.Internet Explorer.Office..NET Framework.S ...

  6. 细说logback之简介

    官网:https://logback.qos.ch/https://logback.qos.ch/manual/index.html logback手册1.下载logback是slf4j的原生实现,所 ...

  7. Metaprogramming

    Metaprogramming https://en.wikipedia.org/wiki/Metaprogramming 元编程, 是一种编程技术, 制造的计算机程序,具有这种能力, 对待程序为他们 ...

  8. 三十八、Linux 线程——线程属性初始化、销毁、设置和获得分离属性

    38.1 线程属性初始化和销毁 #include <pthread.h> int pthread_attr_init(pthread_attr_t *attr); int pthread_ ...

  9. GCC编译器原理（三）------编译原理三：编译过程（3）---编译之汇编以及静态链接【2】

    4.1.2 符号解析与重定位 (1)重定位 在完成空间和地址的分配步骤之后,链接器就进入了符号解析和重定位的步骤,这是静态链接的核心部分. 先看看 a.o 的反汇编文件: objdump -d a.o ...

  10. mybatis-servlet.xml配置SpringMVC样板

    <?xml version="1.0" encoding="UTF-8" ?><beans xmlns:xsi="http://ww ...