判断鼠标进入容器的方向小Demo
参考资料：
贤心博客：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的更多相关文章
- 2015.10.11（js判断鼠标进入容器的方向）
判断鼠标进入容器的方向 1.前几天在万圣节专题项目中用到了鼠标坐标page事件,随着鼠标背景图片移动形成有层次感的效果,但page事件在IE低版本不支持,所以还要做兼容.在研究page事件同时无意中想 ...
- JS判断鼠标移入元素的方向
最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...
- jQuery插件,判断鼠标的移入移出方向
今天用jQuery封装了一个简单的插件,判断鼠标的移入移出方向,以后的项目中可能还会遇到这样一个简单的效果,就记录下来吧! 先看结构和样式: <!DOCTYPE html> <htm ...
- JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
- 关于js判断鼠标移入元素的方向--解释
一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...
- 关于js判断鼠标移入元素的方向——上下左右
一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...
- JS判断鼠标从什么方向进入一个容器
偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...
- js判断鼠标进入以及离开容器的方向
(注:以下代码涉及到jQuery,建议前端大牛绕路~~~) 1.遇到的问题 如图当鼠标右箭头位置上下移动的时候 下面的城市列表容器不能隐藏. 2.方法: 网上搜了些前端大牛们的解决办法 ...
- js中判断鼠标滚轮方向的方法
前 言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...
随机推荐
- Web项目发布的一些设置
比如我们有个项目想要发布到互联网上,我们首先需要购买域名以及主机,主机的话,推荐云主机(本人推荐西部数码或者阿里云),性能好: 我们先在云主机上搭建环境,比如Mysql,Jdk,Tomcat: 然后我 ...
- MySQL中innodb_flush_log_at_trx_commit的设置
innodb_flush_log_at_trx_commit=0,在提交事务时,InnoDB不会立即触发将缓存日志写到磁盘文件的操作,而是每秒触发一次缓存日志回写磁盘操作,并调用操作系统fsync刷新 ...
- 2018牛客网暑期ACM多校训练营（第二场）J Farm（树状数组）
题意 n*m的农场有若干种不同种类作物,如果作物接受了不同种类的肥料就会枯萎.现在进行t次施肥,每次对一个矩形区域施某种类的肥料.问最后枯萎的作物是多少. 分析 作者:xseventh链接:https ...
- HDU 1098(条件满足 数学）
题意是问是否存在非负整数 a,使得任取非负整数 x,f(x) 能够被 65 整除,其中 f(x) = 5*x^13 + 13*x^5 + k*a*x,如存在,输出 a 的最小值,如不存在,输出 no. ...
- HDU 1045(炮台安置 DFS)
题意是在 n*n 的方格中进行炮台的安置,炮台不能处于同一行或同一列(类似于八皇后问题),但若是炮台间有墙壁阻挡,则可以同时安置这对炮台.问图中可以安放的最大炮台数目. 用深搜的方法,若此处为空地,则 ...
- 如何转换cdr文件
You will need to copy the type library from corelDRAW: C:\Program Files (x86)\Corel\CorelDRAW Graphi ...
- Linux下的解压命令
Linux下常见的压缩包格式有5种:zip tar.gz tar.bz2 tar.xz tar.Z 其中tar是种打包格式,gz和bz2等后缀才是指代压缩方式:gzip和bzip2 filename. ...
- Android弹出窗口
protected void PopUp() { final PopupWindow popup = new PopupWindow(TestActivity.this); View popView ...
- 二十九、Linux 进程与信号——minishell（2）
编程内容: 1.完成 echo env export 命令 2.完成前后台进程 3.完成重定向 完整代码如下: 29.1 主函数.通用头文件和Makefile 29.1.1 主函数 mshell_m ...
- 简单linux命令1
1. cat 一次显示整个文件: cat filename 从键盘创建一个文件: cat> filename 将文件合并: cat file1 file2 > filename 2. ...