利用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里嵌入大量字符串常量的实现方法
Jul 07 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
java必学必会之static关键字
Dec 03 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
js 获取扫码枪输入数据的方法
Jun 10 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
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
php的一个登录的类 [推荐]
2007/03/16 PHP
Js获取事件对象代码
2010/08/05 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
JavaScript Split()方法
2015/12/18 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
2018/09/18 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
js实现图片粘贴到网页
2019/12/06 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
js实现验证码功能
2020/07/24 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
python 对key为时间的dict排序方法
2018/10/17 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
python根据url地址下载小文件的实例
2018/12/18 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
为什么说Python可以实现所有的算法
2019/10/04 Python
python爬取招聘要求等信息实例
2020/11/20 Python
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
教师评优的个人自我评价分享
2013/09/19 职场文书
人事任命书格式
2014/06/05 职场文书
图书室标语
2014/06/21 职场文书
理财学专业自荐书
2014/06/28 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis