利用JS判断鼠标移入元素的方向


Posted in Javascript onDecember 11, 2016

利用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);
   }
  });

上面代码的重点主要是在direction的值的计算

Math.atan2(y,x) 返回-PI 到 PI 之间的值(负180°到正180°),是从 X 轴正向逆时针旋转到点 (x,y) 时经过的角度 这里的结果是一个弧度值。那如何把这个值转换为角度呢

我们可以先算出一个角度的弧度值(Math.PI / 180) ,然后用上面计算出来的结果除以一度的弧度值

利用JS判断鼠标移入元素的方向

从上图可以看出,当鼠标从右边进入的时候,角度是在-45°~45°之间的 底部是45~135 左边135~180&-180~-135 顶部是 -135 ~ -45

因为上面计算出来的结果不符合我们的习惯,并且负值在计算的时候会影响正确性,现在我们给这个结果加上180 让角度范围变成我们习惯的0~360°。当加上180之后 0°的位置就在左边的中间了

利用JS判断鼠标移入元素的方向

0度的位置

所以现在的范围变成了

0~44 & 360~315 左边

45~134 上边

135~224 右边

225~314 下边

我们再继续转换,现在我们把算出来的角度除以90,然后四舍五入,可以使得45°为分界线

上边算出来的结果为1

利用JS判断鼠标移入元素的方向

上边

右边算出来的结果为2

利用JS判断鼠标移入元素的方向

右边

下边算出来的结果为3

利用JS判断鼠标移入元素的方向

下边

左边算出来的结果有两种 0~44肯定是为0的 315~360 为4

利用JS判断鼠标移入元素的方向

左边

现在算出来的结果一共有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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript中万恶的function实例分析
May 25 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
js为空或不是对象问题的快速解决方法
Dec 11 Javascript
javascript实现2048游戏示例
May 04 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
JavaScript面试题大全(推荐)
Sep 22 Javascript
JavaScript之WebSocket技术详解
Nov 18 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
JS将unicode码转中文方法
May 08 Javascript
node.js express中app.param的用法详解
Jul 16 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
JS实现小星星特效
Dec 24 Javascript
实现JavaScript高性能的数据存储
Dec 11 #Javascript
探索Javascript中this的奥秘
Dec 11 #Javascript
实例浅析js的this
Dec 11 #Javascript
解析js如何获取css样式
Dec 11 #Javascript
BootStrap轮播HTML代码(推荐)
Dec 10 #Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 #Javascript
JS产生随机数的用法小结
Dec 10 #Javascript
You might like
PHP4中实现动态代理
2006/10/09 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
django实现分页的方法
2015/05/26 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
python实现用户管理系统
2018/01/10 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
python实现飞机大战微信小游戏
2020/03/21 Python
Python实现井字棋小游戏
2020/03/09 Python
在python image 中实现安装中文字体
2020/05/16 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
伦敦最著名的老字号百货公司:Selfridges(塞尔福里奇百货)
2016/07/25 全球购物
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
自荐信如何制作?
2014/02/21 职场文书
党建示范点实施方案
2014/03/12 职场文书
岗位职责怎么写
2014/03/14 职场文书
企业领导对照检查材料
2014/08/20 职场文书
西安兵马俑导游词
2015/02/02 职场文书
2015年药店工作总结
2015/04/20 职场文书
离职证明格式样本
2015/06/12 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL