JS判断鼠标移入元素的方向
这里的关键主要是判断鼠标是从哪个方向进入和离开的
$("li").on("mouseenter mouseleave",function(e) {
var w = this.offsetWidth;
var h = this.offsetHeight;
var x = e.pageX - this.getBoundingClientRect().left - w/2;
var y = e.pageY - this.getBoundingClientRect().top - h/2;
var direction = Math.round((((Math.atan2(y, x) * 180 / Math.PI) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
var eventType = e.type;
var res = Math.atan2(y, x) / (Math.PI / 180) + 180 ;
$('.line').css('transform','rotate('+ res +'deg)');
// console.log(((Math.atan2(y, x) * 180 / Math.PI) + 180));
// console.log(Math.round((Math.atan2(y, x) / (Math.PI / 180) + 180) / 90 + 3) % 4);
var dirName = new Array('上方','右侧','下方','左侧');
$('.res').text(res + 'deg');
if(eventType == 'mouseenter'){
$('.res').text(dirName[direction]+'进入');
animationIn(direction);
}else{
$('.res').text(dirName[direction]+'离开');
animationOut(direction);
}
});demo
上面代码的重点主要是在direction的值的计算
Math.atan2(y,x) 返回-PI 到 PI 之间的值(负180°到正180°)，是从 X 轴正向逆时针旋转到点 (x,y) 时经过的角度 这里的结果是一个弧度值。那如何把这个值转换为角度呢
我们可以先算出一个角度的弧度值(Math.PI / 180) ，然后用上面计算出来的结果除以一度的弧度值
从上图可以看出，当鼠标从右边进入的时候，角度是在-45°~45°之间的 底部是45~135 左边135~180&-180~-135 顶部是 -135 ~ -45
因为上面计算出来的结果不符合我们的习惯，并且负值在计算的时候会影响正确性，现在我们给这个结果加上180 让角度范围变成我们习惯的0~360°。当加上180之后 0°的位置就在左边的中间了
所以现在的范围变成了
0~44 & 360~315 左边
45~134 上边
135~224 右边
225~314 下边
我们再继续转换，现在我们把算出来的角度除以90，然后四舍五入，可以使得45°为分界线
上边算出来的结果为1
上边右边算出来的结果为2
右边下边算出来的结果为3
下边左边算出来的结果有两种 0~44肯定是为0的 315~360 为4
下边现在算出来的结果一共有5个值（左边2个，其他三个面各一个）。下面我们再精简一下结果，我们给每次的结果都加上3，然后和4取余
左边加3之后就是3和7，然后取余后为3
上边加3之后为4，取余后为0
右边加3为5，取余为1
下边加3为6，取余为2
我们最终的结果就是 0->上边 1->右边 2->下边 3->左边 然后我们通过控制left和top就可以实现上面的效果了
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
} html,
body {
width: 100%;
height: 100%;
} ul {
list-style: none;
position: relative;
width: 600px;
width: 100%;
} ul> li {
margin: 50px auto;
position: relative;
width: 300px;
height: 300px;
background-color: black;
overflow: hidden;
} ul> li .bg {
position: absolute;
width: 300px;
height: 300px;
left: -100%;
top: 0;
background-color: red;
text-align: center;
line-height: 300px;
color: blue;
font-size: 150px;
} .line {
position: absolute;
width: 50%;
height: 1px;
background: red;
right: 0;
top: 50%;
transition: all .3s;
transform-origin: left;
} .res {
text-align: center;
}
</style>
</head> <body>
<ul>
<li>
<div class="bg">
SB
</div>
</li>
</ul>
<div class="res"></div>
<script src="js/jquery-3.1.1.js"></script>
<script>
$("li").on("mouseenter mouseleave", function(e) {
var $bg = $(this).find('.bg');
var w = this.offsetWidth; //获取元素宽度
var h = this.offsetHeight; //获取元素高度
var toTop = this.getBoundingClientRect().top + document.body.scrollTop; //兼容滚动条
var x = e.pageX - this.getBoundingClientRect().left - w / 2; //获取当前鼠标的x轴位置（相对于这个li的中心点）
var y = e.pageY - toTop - h / 2; ////获取当前鼠标的y轴位置（相对于这个li的中心点） var direction = Math.round((((Math.atan2(y, x) * 180 / Math.PI) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
var eventType = e.type;
var res = Math.atan2(y, x) / (Math.PI / 180) + 180;
$('.line').css('transform', 'rotate(' + res + 'deg)'); var dirName = new Array('上方', '右侧', '下方', '左侧'); if(eventType == 'mouseenter') {
$('.res').text(dirName[direction] + '进入');
animationIn(direction, $bg);
} else {
$('.res').text(dirName[direction] + '离开');
animationOut(direction, $bg);
}
}); function animationIn(direction, ele) { switch(direction) {
case 0:
ele.css({
left: 0,
top: '-100%'
}).animate({
top: 0
}, 300);
break;
case 1:
ele.css({
left: '100%',
top: 0
}).animate({
left: 0
}, 300);
break;
case 2:
ele.css({
left: 0,
top: '100%'
}).animate({
top: 0
}, 300);
break;
case 3:
ele.css({
left: '-100%',
top: 0
}).animate({
left: 0
}, 300);
break;
}
} function animationOut(direction, ele) {
switch(direction) {
case 0:
ele.animate({
top: '-100%'
}, 300);
break;
case 1:
ele.animate({
left: '100%'
}, 300);
break;
case 2:
ele.animate({
top: '100%'
}, 300);
break;
case 3:
ele.animate({
left: '-100%'
}, 300);
break;
} }
</script> </body> </html>
JS判断鼠标移入元素的方向的更多相关文章
- 关于js判断鼠标移入元素的方向--解释
一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...
- 关于js判断鼠标移入元素的方向——上下左右
一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...
- 2015.10.11（js判断鼠标进入容器的方向）
判断鼠标进入容器的方向 1.前几天在万圣节专题项目中用到了鼠标坐标page事件,随着鼠标背景图片移动形成有层次感的效果,但page事件在IE低版本不支持,所以还要做兼容.在研究page事件同时无意中想 ...
- JS 判断鼠标滚轮的上下滚动
JS 判断鼠标滚轮的上下滚动 <script type="text/javascript"> var scrollFunc = function (e) { e = ...
- js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况
<script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...
- JS用斜率判断鼠标进入DIV四个方向的方法 判断鼠标移入方向
本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识, ...
- JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
- JS判断鼠标从什么方向进入一个容器
偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...
- js 判断鼠标滚轮方向
最近因为公司项目的要求,需要做页面的全屏滚动切换效果. 页面的切换,需要脚本监听鼠标滑轮的滚动事件,来判断页面是向上切换or向下切换. 这里的脚本很简单,我就直接贴出来吧. $('html').on( ...
随机推荐
- Three ways to set specific DeviceFamily XAML Views in UWP
Three ways to set specific DeviceFamily XAML Views in UWP http://igrali.com/2015/08/02/three-ways-to ...
- netload 加载程序集抛异常----无法加载程序集解决办法
netload 加载程序集抛异常----无法加载程序集 错误信息如下: 无法加载程序集.错误详细信息: System.BadImageFormatException: 未能加载文件或程序集“file: ...
- Cracking-- 4.7 在一颗二叉树中找两个节点的第一个共同祖先
分别记录从 root 到 node1 的path 到 node2的path,再找其中共同的部分 struct Node{ int val; struct Node *left; struct Node ...
- dhtmlx相关
主页:http://dhtmlx.com/ 文档地址:http://docs.dhtmlx.com/ 后台:https://dhtmlx.com/docs/products/dhtmlxConnect ...
- linux下搭建nagios
配置环境:1)CentOS 6.5 作为监控主机,IP:10.0.0.30(根据自己公司需要改变) 2)客户机: windows server 2008R2 , windows 7, windows ...
- <数据结构与算法>之字符串，散列，布隆过滤器。
1:字符串 字符串是一组由数字,字符,下划线的一串字符,是特殊的一维数组. 2:字符串的应用 字符串移位包含问题: 例:给定两个字符串s1和s2,要求判断s2是否能被s1做循环移位得到字符串包含.例如 ...
- Rational.Rose.Enterprise.v7.0 （2007）安装分享
很多人都在找rational软件,很多都是2003的,有的宣称是2007,但结果还是2003.也许真的不存在Rational.Rose 2007,不过有IBM.Rational.Rose.Enterp ...
- 电子科技大学第八届ACM趣味程序设计竞赛第四场（正式赛）题解
A. Picking&Dancing 有一列n个石子,两人交替取石子,每次只能取连续的两个,取走后,剩下的石子仍然排成1列.问最后剩下的石子数量是奇数还是偶数. 读懂题意就没什么好说的. #i ...
- 中国UTM分区
高斯-克吕格投影是“等角横切圆柱投影”,投影后中央经线保持长度不变,即比例系数为1: UTM投影是“等角横轴割圆柱投影”,圆柱割地球于南纬80度.北纬84度两条等高圈,投影后两条割线上没有变形,中央经 ...
- Python :open文件操作,配合read()使用！
python:open/文件操作 open/文件操作f=open('/tmp/hello','w') #open(路径+文件名,读写模式) 如何打开文件 handle=open(file_name,a ...