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基础篇
Nov 13 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
React如何避免重渲染
Apr 10 Javascript
通过函数作用域和块级作用域看javascript的作用域链
Aug 05 Javascript
在layui中select更改后生效的方法
Sep 05 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
推荐一篇入门级的Class文章
2007/03/19 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
初识Laravel
2014/10/30 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
shiro授权的实现原理
2017/09/21 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
python实现微信远程控制电脑
2018/02/22 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
python opencv实现简易画图板
2020/08/27 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
Android笔试题总结
2014/11/29 面试题
二手房买卖协议书
2014/04/10 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
竞选部长演讲稿
2014/04/26 职场文书
助学贷款贫困证明
2014/09/23 职场文书
售后服务质量承诺书
2015/04/29 职场文书
德能勤绩工作总结
2015/08/11 职场文书
初中数学教学随笔
2015/08/15 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis