利用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 相关文章推荐
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
AngularJS Module方法详解
Dec 08 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 Javascript
JavaScript实现简单图片切换
Apr 29 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.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
XHProf报告字段含义的解析
2016/05/17 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
JS 自定义带默认值的函数
2011/07/21 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python操作SQLite简明教程
2014/07/10 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
Python+Selenium使用Page Object实现页面自动化测试
2019/07/14 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
python中pickle模块浅析
2020/12/29 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
马云的职业生涯规划之路
2014/01/01 职场文书
《锄禾》教学反思
2014/04/08 职场文书
团队精神的演讲稿
2014/05/14 职场文书
深入理解go slice结构
2021/09/15 Golang