参考资料：

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

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

Demo: Demo

截图：

代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5.   	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  	<title>Document</title>
  7. 	<style>
  8. 	*{ margin:0;padding:0;}
  9. 	#box{ position: absolute;top:200px;left:200px; width:560px;height:560px;border:1px solid #999;padding:10px 0 0 10px; }
  10. 	#box div{ position: relative; float:left;width:100px;height: 100px; margin:0 10px 10px 0;border:1px solid #ccc;overflow: hidden;}
  11. 	#box div.big-box{ width:324px;}
  12. 	#box .mark{ position: absolute;left:-200px;top:-200px;width:100%;height:100%;background-color: #000; opacity: 0.5; border:none; }
  13. 	</style>
  14. 	<script src="jquery-1.8.3.min.js"></script>
  15. 	<script>
  16. 		$(function(){
  17.  
  18. 			var $oBox = $('#box');
  19. 			var $aDivs = $oBox.children();
  20. 			var $aMarks = $('.mark');
  21.  
  22. 			$aMarks.on('mouseenter',function(event){
  23. 				event.stopPropagation();
  24. 				return false;
  25. 			});
  26.  
  27. 			$aDivs.on('mouseenter mouseleave',function( event ){
  28.  
  29. 				var $this = $(this),
  30. 					$mark = $this.find('.mark'),
  31. 					w = $this.width(),
  32. 					h = $this.height(),
  33. 					offset = $this.offset(),
  34. 					scaleX = w > h ? (h / w) : 1,
  35. 		        	scaleY = h > w ? (w / h) : 1,
  36. 		        	x = (event.pageX - offset.left - (w / 2)) * scaleX,
  37. 		        	y = (event.pageY - offset.top - (h / 2)) * scaleY,
  38. 		        	direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4,
  39. 		        	type = event.type;
  40.  
  41. 		        if( direction == 0 ){
  42.  
  43. 					if( type == "mouseenter" ){
  44.  
  45. 						$mark.css({
  46. 							'top'  : -h,
  47. 							'left' : 0
  48. 						});
  49.  
  50. 						$mark.animate({
  51. 							'top' : 0
  52. 						},300);
  53.  
  54. 					}else{
  55.  
  56. 						$mark.animate({
  57. 							'top' : -h
  58. 						},300);
  59.  
  60. 					}
  61.  
  62. 				}else if( direction == 1 ){
  63.  
  64. 					if( type == "mouseenter" ){
  65.  
  66. 						$mark.css({
  67. 							'top'  : 0,
  68. 							'left' : w
  69. 						});
  70.  
  71. 						$mark.animate({
  72. 							'left' : 0
  73. 						},300);
  74.  
  75. 					}else{
  76.  
  77. 						$mark.animate({
  78. 							'left' : w
  79. 						},300);
  80.  
  81. 					}
  82.  
  83. 				}else if( direction == 2 ){
  84.  
  85. 					if( type == "mouseenter" ){
  86.  
  87. 						$mark.css({
  88. 							'top'  : h,
  89. 							'left' : 0
  90. 						});
  91.  
  92. 						$mark.animate({
  93. 							'top' : 0
  94. 						},300);
  95.  
  96. 					}else{
  97.  
  98. 						$mark.animate({
  99. 							'top' : h
  100. 						},300);
  101.  
  102. 					}
  103.  
  104. 				}else if( direction == 3 ){
  105.  
  106. 					if( type == "mouseenter" ){
  107.  
  108. 						$mark.css({
  109. 							'top'  : 0,
  110. 							'left' : -w
  111. 						});
  112.  
  113. 						$mark.animate({
  114. 							'left' : 0
  115. 						},300);
  116.  
  117. 					}else{
  118.  
  119. 						$mark.animate({
  120. 							'left' : -w
  121. 						},300);
  122.  
  123. 					}
  124.  
  125. 				}else{
  126.  
  127. 					$mark.css({
  128. 						'top'  : 0,
  129. 						'left' : 0
  130. 					});
  131.  
  132. 				}
  133.  
  134. 			});
  135.  
  136. 		});
  137. 	</script>
  138. </head>
  139. <body>
  140.  
  141. 	<div id="box">
  142.  
  143. 		<div >
  144. 			<a href="#" class="mark"></a>
  145. 		</div>
  146. 		<div class="big-box">
  147. 			<a href="#" class="mark"></a>
  148. 		</div>
  149. 		<div>
  150. 			<a href="#" class="mark"></a>
  151. 		</div>
  152. 		<div>
  153. 			<a href="#" class="mark"></a>
  154. 		</div>
  155. 		<div>
  156. 			<a href="#" class="mark"></a>
  157. 		</div>
  158. 		<div>
  159. 			<a href="#" class="mark"></a>
  160. 		</div>
  161. 		<div>
  162. 			<a href="#" class="mark"></a>
  163. 		</div>
  164. 		<div>
  165. 			<a href="#" class="mark"></a>
  166. 		</div>
  167. 		<div>
  168. 			<a href="#" class="mark"></a>
  169. 		</div>
  170. 		<div>
  171. 			<a href="#" class="mark"></a>
  172. 		</div>
  173. 		<div>
  174. 			<a href="#" class="mark"></a>
  175. 		</div>
  176. 		<div>
  177. 			<a href="#" class="mark"></a>
  178. 		</div>
  179. 		<div>
  180. 			<a href="#" class="mark"></a>
  181. 		</div>
  182. 		<div>
  183. 			<a href="#" class="mark"></a>
  184. 		</div>
  185. 		<div>
  186. 			<a href="#" class="mark"></a>
  187. 		</div>
  188. 		<div>
  189. 			<a href="#" class="mark"></a>
  190. 		</div>
  191. 		<div>
  192. 			<a href="#" class="mark"></a>
  193. 		</div>
  194. 		<div>
  195. 			<a href="#" class="mark"></a>
  196. 		</div>
  197. 		<div>
  198. 			<a href="#" class="mark"></a>
  199. 		</div>
  200. 		<div>
  201. 			<a href="#" class="mark"></a>
  202. 		</div>
  203. 		<div class="big-box">
  204. 			<a href="#" class="mark"></a>
  205. 		</div>
  206.  
  207. 	</div>
  208.  
  209. </body>
  210. </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. jQuery获取相同元素下标

    如题:经常搞混淆,index()获取的是下标,而eq(下标值)获取的是元素对象 var list=$(".toos");//获取class为toos的元素集合$('.toos'). ...

  2. 【leetcode-66】 加一

    给定一个由整数组成的非空数组所表示的非负整数,在该数的基础上加一. 最高位数字存放在数组的首位, 数组中每个元素只存储一个数字. 你可以假设除了整数 0 之外,这个整数不会以零开头. 示例 1: 输入 ...

  3. HDU 1039(字符串判断 **)

    题意是检查一个字符串是否满足三个条件: 一.至少有一个元音字母.二.不能出现三个连续的元音或三个连续的辅音.三.除了 ee 和 oo 外不能出现两个连续相同字母. 若三个条件都能满足,该字符串满足条件 ...

  4. 牛客网数据库SQL实战(此处只有答案，没有表内容)

    1.查找最晚入职员工的所有信息   select * from employees order by hire_date desc limit 1; --limit n表示输出前n条数据,limit ...

  5. 【十】虚拟机工具 03 - jinfo命令使用

      guchunchaodeMacBook-Air:workspaces guchunchao$ jinfo Usage: jinfo [option] <pid> (to connect ...

  6. 割点判断+luogu 3469 POI2008 BLO

    1.根节点,有2棵及以上子树 2.非根节点,有子节点dfn[u]<=low[v] #include <bits/stdc++.h> #define N 1000050 using n ...

  7. 【Ubuntu】安装Java和Eclipse

    1. 安装Java 1> sudo add-apt-repository ppa:webupd8team/java 2> sudo apt-get update 3> sudo ap ...

  8. Spark思维导图之Spark Core

  9. python 的基础 学习 11天 作业题

    1.整理函数相关知识点,写博客 2.写函数,检查获取传入列表或元组对象的所有奇数位索引对应的元素,并将其作为新列表返回给调用者. def func1(argv): li = [] for i in r ...

  10. 使用C++ stringstream来进行数据类型转换

    参考链接: http://blog.csdn.net/tao_627/article/details/39000779