编程 Javascript

JQuery获取鼠标进入和离开容器的方向

Posted in Javascript onDecember 29, 2016

做动画时，需要判断鼠标进入和退出容器的方向。网上找到的基于JQuery的实现方法，用函数封装了一下，写了一个示例。注意绑定鼠标事件用的是on()，所以JQuery版本需高于1.7。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>判断鼠标从哪个方向进入和离开容器</title>
  <script src="js/jquery-3.1.1.min.js"></script>
  <style>
   *{border: 0;margin: 0;padding: 0;}
   .item{width: 300px; height: 200px;border: 1px solid #999;margin: 50px;}
  </style>
 </head>
 <body>
  <div class="item">
  </div>
  <p id="info"></p>
 </body>
 <script>
  /**
   * 判断鼠标从哪个方向进入和离开容器
   * @param {Object} tag JQuery对象，事件绑定的主体
   * @param {Object} e event对象
   * @return {Number} direction 值为“0,1,2,3”分别对应着“上，右，下，左”
   */
  function moveDirection(tag,e){
   var w = $(tag).width();
   var h = $(tag).height();
   var x = (e.pageX - tag.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
   var y = (e.pageY - tag.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
   var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; 
   return direction;
  }
  //使用方法
  $(".item").on("mouseenter mouseleave", function (e) {
   var eType = e.type;
   var direction = moveDirection(this,e);
   var dirName = new Array("上","右","下","左");
   if(eType == "mouseenter"){
    $("#info").text("鼠标从"+dirName[direction]+"方进入方框");
   }else if(eType == "mouseleave"){
    $("#info").text("鼠标从"+dirName[direction]+"方离开方框");
   }
  });
 </script>
</html>

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

- Author -

Kalo

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 面向对象的JavaScript类

May 04 Javascript

JavaScript 事件系统

Jul 22 Javascript

uploadify 3.0 详细使用说明

Jun 18 Javascript

Jquery显示、隐藏元素以及添加删除样式

Aug 09 Javascript

JS设置获取cookies的方法

Jan 26 Javascript

自制的文件上传JS控件可支持IE、chrome、firefox etc

Apr 18 Javascript

ECHO.js 纯javascript轻量级延迟加载的实例代码

May 24 Javascript

最全面的百度地图JavaScript离线版开发

Sep 10 Javascript

详解vue表单——小白速看

Apr 08 Javascript

解决vue v-for 遍历循环时key值报错的问题

Sep 06 Javascript

node 标准输入流和输出流代码实例

Sep 19 Javascript

element-ui中dialog弹窗关闭按钮失效的解决

Sep 22 Javascript

jQuery实现遮罩层登录对话框

Dec 29 #Javascript

JS实现的简易拖放效果示例

Dec 29 #Javascript

使用DeviceOne实现微信小程序功能

Dec 29 #Javascript

Angularjs 动态改变title标题(兼容ios)

Dec 29 #Javascript

浅谈js算法和流程控制

Dec 29 #Javascript

canvas学习之API整理笔记（二）

Dec 29 #Javascript

Node.js复制文件的方法示例

Dec 29 #Javascript