判断鼠标进入容器的方向小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 ...
随机推荐
- 使用 boot-repair 对 Windows + Ubuntu 双系统引导修复
问题描述: 由于在windows上进行更新/重装/修改了引导设置以后,windows会“自私”地重写引导,导致Ubuntu系统引导消失而无法选择Ubuntu启动.
- HDU - 6393 Traffic Network in Numazu（树链剖分+基环树）
http://acm.hdu.edu.cn/showproblem.php?pid=6393 题意 给n个点和n条边的图,有两种操作,一种修改边权,另一种查询u到v的最短路. 分析 n个点和n条边,实 ...
- PHP7 学习笔记（十五）Repository 模式实现业务逻辑和数据访问的分离
参考: 1.http://laravelacademy.org/post/3063.html
- window跟vue变量互相绑定
js实现变量监听 //定义一个对象,挂载到window下,后续在任何模块中,给这个对象的show属性赋值,都将触发set对应的代码,我这么写主要是为了解决vue子组件向父组件传值的问题 window. ...
- keeping.py
定时push+告警 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author : 71standby@gmail.com # Description ...
- XXE攻防
一.XML基础知识 XML用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言.XML文档结构包括XML声明.DTD文档类型定义(可 ...
- JS基础题
1.三目运算符(三元条件语句)的使用方法? 条件表达式?true表达式:false表达式 2.JS数据中哪些属于引用类型? 数组.对象 引用类型变量,变量名所储存的不是变量值,而是变量所在的地址. 3 ...
- Task Asnyc 异常问题
/// <summary> /// async 异常捕获问题 /// </summary> /// <param name="context"> ...
- oracle 远程连接不到dba用户
如果要远程连接192.168.10.44上的oracle,那么192.168.10.44服务器必须启动TNSListener.(配置文件 listener.ora) http://www.111cn. ...
- 电脑丢失api-ms-win-core-libraryloader-|1-1-1.dll怎么办
电脑从win7升级到win10,到98%的时候提示说丢失.dll,如图,我是64位系统,怎么解决这个问题呢?在脚本之家下载了 放到system32中也没有用,在线等,谢谢! 用C:\Windows\S ...