参考资料：

　　贤心博客：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. 搭建vscode+vue环境

    转自:https://blog.csdn.net/mao834099514/article/details/79138484 一.安装vue.js 1.简介 Vue.js(读音 /vjuː/, 类似于 ...

  2. Freemarker中的日期输出

    <p> ${scheme.createTime?string("yyyy年MM月dd日 HH:mm:ss")}</p>

  3. c++进阶学习

    以后可能要做c++开发了..记录要看的书和可能用的技术,让自己有个学习的方向... 1. 语言基础 2. 算法与数据结构基础 3. 多线程开发基础  4. 数据库  5. 网络编程 6. 内存数据库技 ...

  4. python模块之logging模块

    1. 低配版 # 指定显示信息格式 import logging logging.basicConfig( level=20, # 设置显示或写入的起始级别 format="%(asctim ...

  5. Java实现猜数字，附带提示功能。

    很简单的一段代码: package com.changeyd.demo; import java.util.Random;import java.util.Scanner;public class M ...

  6. linux修改主机名,关闭图形化界面,绑定ip地址,修改ip地址

    1关闭图形化界面 vi /etc/inittab 改成id:3:initdefault: 注意:不要选0或6 2.修改主机名 vi /etc/sysconfig/network 修改即可 3,修改ip ...

  7. 四十、Linux 线程——互斥锁和读写锁

    40.1 互斥锁 40.1.1 介绍 互斥锁(mutex)是一种简单的加锁的方法来控制对共享资源的访问. 在同一时刻只能有一个线程掌握某个互斥锁,拥有上锁状态的线程能够对共享资源进行访问. 若其他线程 ...

  8. article2pdf (Wordpress plug-in) Multiple vulnerabilities(CVE-2019-1000031, CVE-2019-1010257)

    Product: article2pdf (Wordpress plug-in)Product Website: https://wordpress.org/plugins/article2pdf/A ...

  9. AIDL通信过程中设置死亡代理

    关于AIDL的使用参考学习: https://blog.csdn.net/u011240877/article/details/72765136 https://blog.csdn.net/iromk ...

  10. Django 基于类的通用视图

    在早期,我们认识到在视图开发过程中有共同的用法和模式.这时我们引入基于函数的通用视图来抽象这些模式以简化常见情形的视图开发. 基于函数视图的用法有以下三种: def index(request): r ...