做动画时，需要判断鼠标进入和退出容器的方向。网上找到的基于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中Fragment和ViewPager那点事儿（仿微信APP）

    在之前的博文<Android中使用ViewPager实现屏幕页面切换和引导页效果实现>和<Android中Fragment的两种创建方式>以及<Android中Fragm ...

  2. 前端构建大法 Gulp 系列 (四)：gulp实战

    前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gulp专家 前 ...

  3. what's deviceone

    DeviceOne技术介绍 一．     DeviceOne是什么 DeviceOne(以下简称Do)是一个移动开发的平台或技术,与之对等的是Android移动开发技术,iOS移动开发技术,Windo ...

  4. Android Studio2.1.2 Java8环境下引用Java Library编译出错

    转载请注明出处:http://www.cnblogs.com/LT5505/p/5685242.html 问题:在Android Studio2.1.2+Java8的环境下,引用Java Librar ...

  5. SI与EMI(一) - 反射是怎样影响EMI

    Mark为期两天的EMC培训中大概分成四个时间差不多的部分,简单来说分别是SI.PI.回流.屏蔽.而在信号完整性的书籍中,也会把信号完整性分为:1.信号自身传输的问题(反射,损耗):2.信号与信号之间 ...

  6. javascript中的浮点数运算

    解释一下下面代码的输出 console.log(0.1 + 0.2); //0.30000000000000004 console.log(0.1 + 0.2 == 0.3); //false Jav ...

  7. 解析大型.NET ERP系统 十三种界面设计模式

    成熟的ERP系统的界面应该都是从模板中拷贝出来的,各类功能的界面有规律可遵循.软件界面设计模式化或是艺术性的创作,我认可前者,模式化的界面客户容易举一反三,降低学习门槛.除了一些小部分的功能界面设计特 ...

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

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

  9. 前端学HTTP之网站架构演化

    前面的话 本文将详细介绍网站架构的演化过程 初始阶段 大型网站都是从小型网站发展而来,网站架构也是一样,是从小型网站架构逐步演化而来.小型网站最开始时没有太多人访问,只需要一台服务器就绰绰有余,这时的 ...

  10. Android之常见问题集锦Ⅰ

     Android中如何在ViewPager中使动态创建的ImageView铺满屏幕 最近在做东西的时候,有一个要求,就是把用于在ViewPager里面轮播的图片铺满屏幕,但是中间遇到的问题是,Imag ...