做动画时，需要判断鼠标进入和退出容器的方向。网上找到的基于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. Android开发案例 – 在AbsListView中使用倒计时

    在App中, 有多种多样的倒计时需求, 比如: 在单View上, 使用倒计时, 如(如图-1) 在ListView(或者GridView)的ItemView上, 使用倒计时(如图-2) 图-1 图-2 ...

  2. Hyper-V上运行的Linux虚拟机验证是否安装了集成服务

    Hyper-V上运行的Linux虚拟机验证是否安装了集成服务 ps aux|grep "hv"root       311  0.0  0.0      0     0 ?     ...

  3. mono for android 用ISharedPreferences 进行状态保持 会话保持 应用程序首选项保存

    由于项目需要 要保持用户登录状态 要进行状态保持 用途就好像asp.net的session一样 登录的时候进行保存 ISharedPreferences shared = GetSharedPrefe ...

  4. Java 开发主流 IDE 环境体验

    前言 本来应该继续从 Oracle 官网搬砖的,但是随着示例代码越来越复杂,涉及的类库越来越多,使用 Vim 写 Java 代码就很力不从心了,是时候上 IDE 了.我最熟悉的 IDE 环境是 Ecl ...

  5. 高级SQL运用

    一:什么是数据库设计? 数据库设计就是将数据库中的数据实体以及这些数据实体之间的关系,进行规范和结构化的过程. 二:为什么要实施数据库设计? 1:良好的数据库设计可以有效的解决数据冗余的问题 2:效率 ...

  6. 警告: [unchecked] 对作为原始类型IScheme的成员的write(TProt ocol,T)的调用未经过检查

    jdk 从8 改成了7 就好了! 或者, 修改源码, 每个响应的地方加上 surppressingWarnings xxx , 或者使用 请使用 -Xlint:unchecked 重新编译. 参照 h ...

  7. android-解决全屏-webview-输入框被输入法挡住-FullScreen-adjustResize失效问题

    由于公司开发的 App 中,Html 的页面嵌入的有点多,坑爹的是,还有很多输入框,这就算了,还要求全屏.然后就出现了这个情况. 下面来唠叨唠叨具体的来龙去脉. 起初是这样的,整个项目基本完工了.测试 ...

  8. iOS 关于PCH文件(全局文件)的介绍

    1.pch文件是什么 pch文件即 扩展名为.pch的预编译文件.是将工程中较稳定的不会经常修改的代码预先编译好,放在一个公共的文件(.pch)里. 2.pch 文件的作用 A.存放宏. 比如  #d ...

  9. 【WPF】闲着没事，写了个支持数据列表分页的帮助类

    支持分页的MVVM组件大家可以网上找,老周这个类只是没事写来娱乐一下的,主要是功能简单,轻量级,至少它满足了我的需求,也许还有未知的 bug . 这个类支持对数据列表进行分页处理,原理是利用 Skip ...

  10. 牛逼的css3:动态过渡与图形变换

    写css3的属性的时候,最好加上浏览器内核标识,进行兼容. -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Fir ...