一个代码段(判断鼠标进入方向)

简介: 一个代码段(判断鼠标进入方向)

$("li").on("mouseenter mouseleave",function(e) {
           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)) * (w > h ? (h / w) : 1);   //获取当前鼠标的x轴位置
           var y = (e.pageY - toTop - h/2) * (h > w ? (w / h) : 1);
          //上面对长方形也做了兼容,也就是按照最小的那个边的一半作为半径了
          //例如有一个宽6,高是2的矩形 右上角的坐标就是{x:3,y:1},经过上面的计算后{x:2/6 * 3,y:1}=》{x:1,y:1}   算出来也就是45°的样子
          //如果是正方形,可以去掉后面的系数(w>h && h>w)
           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);
          }
      });

转载自:http://www.jianshu.com/p/2a851db6475a


相关文章
|
JavaScript
vue 语音播报(文字转语音)
vue 语音播报(文字转语音)
704 0
|
Java
Java日期时间DateUtils工具包
Java日期时间DateUtils工具包
527 0
Java日期时间DateUtils工具包
|
人工智能 自然语言处理 UED
通义听悟上线音视频问答助手
【2月更文挑战第30天】阿里巴巴“通义听悟”推出音视频问答助手“小悟”,能理解6小时内容,提供精准问答,适用于学术、会议、教育场景。此外,还具有一键AI改写、思维导图生成功能,优化笔记体验,支持多语种自动识别。已吸引百万用户,日处理字符数达20亿。但可能在专业术语理解及用户体验上存在挑战。
255 3
通义听悟上线音视频问答助手
|
JavaScript 关系型数据库 MySQL
创建nodejs项目并接入mysql,完成用户相关的增删改查的详细操作
创建nodejs项目并接入mysql,完成用户相关的增删改查的详细操作
196 0
|
10月前
|
存储 Oracle 关系型数据库
【赵渝强老师】MySQL InnoDB的数据文件与重做日志文件
本文介绍了MySQL InnoDB存储引擎中的数据文件和重做日志文件。数据文件包括`.ibd`和`ibdata`文件,用于存放InnoDB数据和索引。重做日志文件(redo log)确保数据的可靠性和事务的持久性,其大小和路径可由相关参数配置。文章还提供了视频讲解和示例代码。
339 11
【赵渝强老师】MySQL InnoDB的数据文件与重做日志文件
|
11月前
|
Web App开发 JavaScript 前端开发
鸿蒙Flutter实战:04-如何使用DevTools调试Webview
本文介绍如何在鸿蒙 Flutter 开发中调试 Webview,包括配置允许调试、找到 devtools 端口、开启端口转发、在 Chrome 中调试 Webview等。
365 0
鸿蒙Flutter实战:04-如何使用DevTools调试Webview
|
11月前
|
存储 安全 前端开发
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
1196 0
|
设计模式 开发框架 .NET
分享一个 .NET Core Console 项目使用依赖注入的详细例子
分享一个 .NET Core Console 项目使用依赖注入的详细例子
232 0
|
算法 Java 开发者
深入理解死锁的原因、表现形式以及解决方法,对于提高Java并发编程的效率和安全性具有重要意义
【6月更文挑战第10天】本文探讨了Java并发编程中的死锁问题,包括死锁的基本概念、产生原因和解决策略。死锁是因线程间争夺资源导致的互相等待现象,常由互斥、请求与保持、非剥夺和循环等待条件引起。常见死锁场景包括资源请求顺序不一致、循环等待等。解决死锁的方法包括避免嵌套锁、设置锁获取超时、规定锁顺序、检测与恢复死锁,以及使用高级并发工具。理解并防止死锁有助于提升Java并发编程的效率和系统稳定性。
627 0
|
Android开发
Android SystemUI去掉拖动亮度条QSPanel界面隐藏功能
Android SystemUI去掉拖动亮度条QSPanel界面隐藏功能
305 0