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 相关文章推荐
用 javascript 实现的点击复制代码
Mar 24 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
利用jQuery实现可以编辑的表格
May 26 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
浅谈 Vue 项目优化的方法
Dec 16 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安装全攻略:APACHE
2006/10/09 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
php函数连续调用实例分析
2015/07/30 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
Vue.js页面中有多个input搜索框如何实现防抖操作
2019/11/04 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
Python try except finally资源回收的实现
2021/01/25 Python
css3 transform属性详解
2014/09/30 HTML / CSS
英国女性时尚精品店:THE DRESSING ROOM
2018/05/23 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
某公司部分笔试题
2013/11/05 面试题
小学课改工作总结
2015/08/13 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
Go语言特点及基本数据类型使用详解
2022/03/21 Golang