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

    /*   ** lineFrame:     虚线的 frame   ** length:        虚线中短线的宽度   ** spacing:       虚线中短线之间的间距   ** co ...

  2. mysql-5.6.34 Installation from Source code

    Took me a while to suffer from the first successful souce code installation of mysql-5.6.34. Just pu ...

  3. Windows cmd 长时间不输出新内容 直到按下ctrl + c 取消或者回车的解决办法

    换了一台新电脑, 在使用 ant 拷贝大量文件的时候 cmd 窗口过了很久没有继续输出新的内容,远远超过平时的耗时, 以为已经卡死 按下 ctrl + c 取消, 这时并没有取消, 而是输出了新内容, ...

  4. Struts的拦截器

    Struts的拦截器 1.什么是拦截器 Struts的拦截器和Servlet过滤器类似,在执行Action的execute方法之前,Struts会首先执行Struts.xml中引用的拦截器,在执行完所 ...

  5. 分布式存储 CentOS6.5虚拟机环境搭建FastDFS-5.0.5集群

    前言:       由于公司项目需要,最近开始学习一下分布式存储相关知识,确定使用FastDFS这个开源工具.利用周末的时间在虚拟机上搭建了分布式存储系统,在搭建过程中,发现网上的资料说的并不是很全, ...

  6. [DeviceOne开发]-土地销售项目源码分享

    一.简介 这个是一个真实项目开源,虽然不是很花哨,但是中规中矩,小细节处理的也很好,非常值得参考和借鉴.里面的数据都缓存到本地,可以离线运行,但是调整一下代码,马上就可以和服务端完全对接.后续会有详细 ...

  7. iOS开发系列--通讯录、蓝牙、内购、GameCenter、iCloud、Passbook系统服务开发汇总

    --系统应用与系统服务 iOS开发过程中有时候难免会使用iOS内置的一些应用软件和服务,例如QQ通讯录.微信电话本会使用iOS的通讯录,一些第三方软件会在应用内发送短信等.今天将和大家一起学习如何使用 ...

  8. Javascript之变量作用域

    分析: 无论是强类型语言c#.c++.java等语言,还是弱类型语言如Javascript,所有变量可以抽象为两种类型,即局部变量和全局变量. 全局变量:整个作用域可见. 局部变量:局部可见,退出作用 ...

  9. 将一句话里的单词进行倒置，标点符号不倒换。比如将“I come from Shanghai.”倒换后变为“Shanghai. from come I”

    string str = "I come from Shanghai."; //根据空格切割 string[] strS = str.Split(' '); string temp ...

  10. 【说解】在shell中通过mkfifo创建命名管道来控制多个进程并发执行

    背景: 工作中有两个异地机房需要传数据,数据全名很规范,在某个目录下命名为统一的前缀加上编号.如/path/from/file.{1..100}.而机房间的专线对单个scp进程的传输速度是有限制的,比 ...