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

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

$("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 语音播报(文字转语音)
681 0
|
Java
Java日期时间DateUtils工具包
Java日期时间DateUtils工具包
523 0
Java日期时间DateUtils工具包
|
Java 微服务
【SpringBoot】SpringBoot工程 自定义配置文件
【SpringBoot】SpringBoot工程 自定义配置文件
178 0
|
开发框架 关系型数据库 PHP
Laravel
Laravel 是一款基于 PHP 的 Web 应用程序开发框架,它具有简洁、优雅的语法,强大的功能,以及丰富的组件,让开发者能够快速、高效地开发出功能丰富、性能优良的 Web 应用。要用 Laravel,首先需要安装 Laravel。
273 2
|
JavaScript 关系型数据库 MySQL
创建nodejs项目并接入mysql,完成用户相关的增删改查的详细操作
创建nodejs项目并接入mysql,完成用户相关的增删改查的详细操作
184 0
|
11月前
|
Web App开发 JavaScript 前端开发
鸿蒙Flutter实战:04-如何使用DevTools调试Webview
本文介绍如何在鸿蒙 Flutter 开发中调试 Webview,包括配置允许调试、找到 devtools 端口、开启端口转发、在 Chrome 中调试 Webview等。
340 0
鸿蒙Flutter实战:04-如何使用DevTools调试Webview
|
11月前
|
存储 安全 前端开发
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
在前端开发中需要考虑的常见web安全问题和攻击原理以及防范措施
1105 0
|
消息中间件 Linux 测试技术
【xenomai3内核解析】系列文章大纲
该博客系列详细解析了Linux实时操作系统框架Xenomai,包括实时操作系统的概念、Linux为何非实时、嵌入式实时Linux方案等。内容涵盖Xenomai内核构建、组件结构、源码介绍、实时性测试及接口应用。此外,深入探讨了双核基石IPipe、系统调用、时间子系统、任务管理、同步与互斥、内存管理、信号处理、实时IPC、POSIX IPC、实时驱动模型RTDM、Rtnet、用户态实时库libcobalt和实时性能优化等方面。适合对Linux实时系统感兴趣的读者学习研究。
350 0
【xenomai3内核解析】系列文章大纲
|
存储 关系型数据库 MySQL
MySQL 格式化日期函数 DATE_FORMAT(), FROM_UNIXTIME() 和 UNIX_TIMESTAMP() 之间区别
MySQL 格式化日期函数 DATE_FORMAT(), FROM_UNIXTIME() 和 UNIX_TIMESTAMP() 之间区别
394 1
安装并使用labelImg标注数据集,yolo,VOC格式
安装并使用labelImg标注数据集,yolo,VOC格式
558 0

热门文章

最新文章