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

    我们都知道,开发一个app很大程度依赖服务端:服务端提供接口数据,然后我们展示:另外,开发一个app,还需要美工协助切图.没了接口,没了美工,app似乎只能做成单机版或工具类app,真的是这样的吗?先 ...

  2. WebStorm 2016 最新版激活(activation code方式)

    WebStorm 2016 最新版激活(activation code方式) WebStorm activation code WebStorm 最新版本激活方式: 今天下载最新版本的WebStorm ...

  3. 自建git node pm2 （不赘述，就说遇见的问题）

    //======================[git]部分 主题部分还是按照网上的办法进行安装. 安装的话  分为两个办法(一个是yum (contos办法)  或者sudo(ubuntu办法) ...

  4. OpenWrt中开启usb存储和samba服务

    在从官网安装的WNDR3800 15.05.1版本OpenWrt中, 不带usb存储支持以及samba, 需要另外安装 1. 启用usb支持 USB Basic Support https://wik ...

  5. OAuth2 理解

    OAth2 是为了某个应用向第三方应用开放服务时,控制权限的. 因为不可以直接将账户体系开放出去,要求重新登录. 其实本质是让用户在客户端来判断是否要给该应用开放平台的权限,如果用户同意,那么可以拿到 ...

  6. .NET基础拾遗（1）类型语法基础和内存管理基础

    Index : (1)类型语法.内存管理和垃圾回收基础 (2)面向对象的实现和异常的处理 (3)字符串.集合与流 (4)委托.事件.反射与特性 (5)多线程开发基础 (6)ADO.NET与数据库开发基 ...

  7. Spark笔记：复杂RDD的API的理解（下）

    本篇接着谈谈那些稍微复杂的API. 1)   flatMapValues:针对Pair RDD中的每个值应用一个返回迭代器的函数,然后对返回的每个元素都生成一个对应原键的键值对记录 这个方法我最开始接 ...

  8. [Intel Edison开发板] 01、Edison开发板性能简述

    Integrated Wi-Fi certified in 68 countries, Bluetooth® 4.0 support, 1GB DDR and 4GB flash memory sim ...

  9. tomcat RMI 停不掉

    项目采用jfinal框架,做了一个RMI的服务,对其它程序提供服务.实现上,写了一个RmiPlugin package com.wisdombud.cloudtalk.plugin; import j ...

  10. Code First Migrations

    在MVC开发当中难免会对类进行修改,修改后再次运行就会出现异常,提示上下文的模型已在数据库创建后发生改变. 支持“AppContext”上下文的模型已在数据库创建后发生更改.请考虑使用 Code Fi ...