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>

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

Javascript 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
jquery插件 cluetip 关键词注释
Jan 12 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
JS for...in 遍历语句用法实例分析
Aug 24 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 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
You might like
Php部分常见问题总结
2006/10/09 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
一段实用的php验证码函数
2016/05/19 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
python解析xml文件实例分析
2015/05/27 Python
python友情链接检查方法
2015/07/08 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
大型车展策划方案
2014/02/01 职场文书
大家访活动实施方案
2014/03/10 职场文书
《称象》教学反思
2014/04/25 职场文书
婚前保证书
2014/04/29 职场文书
离职证明范本
2015/06/12 职场文书
linux下安装redis图文详细步骤
2021/12/04 Redis