做动画时，需要判断鼠标进入和退出容器的方向。网上找到的基于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>

基于JQuery的获取鼠标进入和离开容器方向的实现的更多相关文章

  1. 一款基于jquery实现的鼠标单击出现水波特效

    今天要为大家绍一款由jquery实现的鼠标单击出现水波特效.用鼠标猛点击页面,你可以看到页面不断出面水波纹效果.然后水波纹渐渐消失.效果非常不错.我们一起看下效果图: 在线预览   源码下载 实现的代 ...

  2. 一款基于jQuery的支持鼠标拖拽滑动焦点图

    记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...

  3. 基于jquery的-获取短信验证码-倒计时

    在制作短信验证的时候,需要做一个获取短信按钮,点击后显示倒计时, html代码如下: <input class="gain" type="button" ...

  4. js判断鼠标进入以及离开容器的方向

      (注:以下代码涉及到jQuery,建议前端大牛绕路~~~) 1.遇到的问题      如图当鼠标右箭头位置上下移动的时候  下面的城市列表容器不能隐藏. 2.方法: 网上搜了些前端大牛们的解决办法 ...

  5. 《基于JQuery和CSS的特效整理》系列分享专栏

    <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...

  6. 基于jQuery的鼠标悬停时放大图片的效果制作

    这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动.这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后 ...

  7. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  8. 基于jQuery鼠标滚轮滑动到页面节点部分

    基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  9. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

随机推荐

  1. JavaMail发送邮件

    发送邮件包含的内容有: from字段  --用于指明发件人 to字段      --用于指明收件人 subject字段  --用于说明邮件主题 cc字段     -- 抄送,将邮件发送给收件人的同时抄 ...

  2. Matrix4x4矩阵变换、欧拉角转四元数、角度转弧度

    Matrix4x4 // 重置矩阵 ][]) { m[][] = ; m[][] = ; m[][] = ; m[][] = ; m[][] = ; m[][] = ; m[][] = ; m[][] ...

  3. CYQ.Data V5 分布式缓存Redis应用开发及实现算法原理介绍

    前言: 自从CYQ.Data框架出了数据库读写分离.分布式缓存MemCache.自动缓存等大功能之后,就进入了频繁的细节打磨优化阶段. 从以下的更新列表就可以看出来了,3个月更新了100条次功能: 3 ...

  4. DTO – 服务实现中的核心数据

    在一个Web服务的实现中,我们常常需要访问数据库,并将从数据库中所取得的数据显示在用户页面中.这样做的一个问题是:用于在用户页面上展示的数据和从数据库中取得的数据常常具有较大区别.在这种情况下,我们常 ...

  5. ucos实时操作系统学习笔记——任务间通信（队列）

    ucos操作系统中的queue机制同样使用了event机制来实现,其实和前面的sem,mutex实现类似,所不同的是对sem而言,任务想获得信号量,对mutex而言,任务想获得的是互斥锁.任务间通信的 ...

  6. 大型网站的灵魂——性能

    前言     在前一篇随笔<大型网站系统架构的演化>中,介绍了大型网站的演化过程,期间穿插了一些技术和手段,我们可以从中看出一个大型网站的轮廓,但想要掌握设计开发维护大型网站的技术,需要我 ...

  7. 如何在 Visual Studio 中使用 Git 同步代码到 CodePlex

    开源社区不管在国内还是国外都很火热,微软也曾因为没有开源而倍受指责,但是随着 .Net framework.ASP.Net MVC等框架的逐渐开源,也让大家看到了微软开源的步伐.CodePlex 则是 ...

  8. [译]ZOOKEEPER RECIPES-TWO PHASED COMMIT

    两段式提交 两段式提交协议可以让所有分布式系统中的客户端达成协议同时提交或回滚事务. 在ZooKeeper中你可以通过协调者(coordinator)创建一个事务节点来实现两段式提交.例如" ...

  9. Html<a>标签href的困惑记载

    近日,在工作中遇到一个小问题(给手游平台做些网页活动,其中牵涉到一个按钮链接,就习以为常的用了A标签,Click响应之后走一段js代码逻辑-弹出一个分享微信弹框.Chrome和Android平台都没问 ...

  10. Android-环境问题

    大家都知道 Android Studio 是 Goole 的亲儿子,但,亲儿子毕竟也是刚出生2年不到,身上大毛病没有,小毛病大一堆,这篇博文就来总结一下常见的Android Studio 的设置,使用 ...