偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题。首先想到的是给容器的四个边添加几个块，然后看鼠标进入的时候哪个块先监听到鼠标事件。不过这样麻烦太多了。google了一下找到了一个不错的解决方法，是基于jquery的，原文地址

说实话，其中的var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;这句用到的数学知识我是真没有看明白，原文中有一些英文注释我就不一一说明了。代码部分不是很多，我直接写了个示例。


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>判断鼠标进入方向</title>

</head>

<body>

<style>

html,body{margin:0;padding:0;}

#wrap{width:300px;height:300px;background:#33aa00;margin:50px;display:inline-block;font-size:50px;text-align:center;line-height:300px;}

</style>

<div id="wrap">

     方向反馈

</div>

<script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script>

<script>

$("#wrap").bind("mouseenter mouseleave",

function(e) {

    var w = $(this).width();

    var h = $(this).height();

    var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);

    var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);

    var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;

    var eventType = e.type;

    var dirName = new Array('上方','右侧','下方','左侧');

    if(e.type == 'mouseenter'){

        $(this).html(dirName[direction]+'进入');

    }else{

        $(this).html(dirName[direction]+'离开');

    }

});

</script>

</body>

</html>

鼠标移动到上面，可以看到效果。其中返回的direction的值为“0,1,2,3”分别对应着“上，右，下，左”
所以结果值可以switch循环

switch (direction) {

  case 0:

    $(this).html('上方进入');

    break;

  case 1:

    $(this).html('右侧进入');

    break;

  case 2:

    $(this).html('下方进入');

    break;

  case 3:

    $(this).html('左侧进入');

    break;

}

原文代码是基于jquery的，后面我写了个原生的js效果，代码没有封装，给需要的朋友。由于firefox等浏览器不支持mouseenter,mouseleave事件，所以我暂时用mouseover,mouseout代替了，如果大家需要解决冒泡问题的话，还是自行搜索兼容性解决方法吧。

var wrap = document.getElementById('wrap');

var hoverDir = function(e){

    var w=wrap.offsetWidth;

    var h=wrap.offsetHeight;

    var x=(e.clientX - wrap.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);

    var y=(e.clientY - wrap.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);

    var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;

    var eventType = e.type;

    var dirName = new Array('上方','右侧','下方','左侧');

    if(e.type == 'mouseover' || e.type == 'mouseenter'){

        wrap.innerHTML=dirName[direction]+'进入';

    }else{

        wrap.innerHTML=dirName[direction]+'离开';

    }

}

if(window.addEventListener){

    wrap.addEventListener('mouseover',hoverDir,false);

    wrap.addEventListener('mouseout',hoverDir,false);

}else if(window.attachEvent){

    wrap.attachEvent('onmouseenter',hoverDir);

    wrap.attachEvent('onmouseleave',hoverDir);

}

JS判断鼠标从什么方向进入一个容器的更多相关文章

  1. JS判断鼠标从哪个方向进入DIV容器

    写的不够高大上 , 不要介意哦... Js: //进去 $(".flash").bind("mouseenter",function(e){ /** the w ...

  2. js判断鼠标滑轮滚动方向并根据滚动的方向触发不同的事件

    <script> var scrollFunc = function (e) { var direct = 0; e = e || window.event; if (e.wheelDel ...

  3. JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题

    1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...

  4. JS 判断鼠标滚轮的上下滚动

    JS 判断鼠标滚轮的上下滚动   <script type="text/javascript"> var scrollFunc = function (e) { e = ...

  5. JS判断鼠标移入元素的方向

    最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...

  6. 关于js判断鼠标移入元素的方向--解释

    一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...

  7. 关于js判断鼠标移入元素的方向——上下左右

    一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...

  8. 2015.10.11（js判断鼠标进入容器的方向）

    判断鼠标进入容器的方向 1.前几天在万圣节专题项目中用到了鼠标坐标page事件,随着鼠标背景图片移动形成有层次感的效果,但page事件在IE低版本不支持,所以还要做兼容.在研究page事件同时无意中想 ...

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

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

随机推荐

  1. Android-ViewPagerIndicator框架使用——TabPageIndicator以及样式的修改

    今天介绍一个常用的框架,一般app都会用到这样的框架,下面就来介绍框架的使用以及样式的修改,那就以我自己写的例子来向大家介绍吧! 首先给出xml ,在相应窗口的布局文件中引入TabPageIndica ...

  2. 2dx解析cocosbuilder中使用layer时的缺陷

    2dx解析cocosbuilder中使用layer时的缺陷 cocos2d-x 3.7 cocosbuilder中的layer通常会用到触摸属性: 但是在2dx解析布局文件的时候,却很多属性都没解析: ...

  3. HTML笔记1

    HTML和css技术 HTML和css技术 html的介绍 网页的基本结构 今天学习的标签 标签属性 浏览器 DW快捷键 相对路径和绝对路径 HTML当中的颜色模式 网页当中常用的图片格式 html的 ...

  4. css中内容生成器

    一,内容生成器:content 补充before和after伪类选择器: 1):将内容添加到某个选择器定义的单个或者多个元素的每一个实例之前或者之后 2)与before选择器配合使用(同理大家想下会不 ...

  5. BeginInvoke、ThreadPool、Task三类异步方法的区别和速度比较

      速度(最快为1) 返回值 多参数 等待在时限内完成 超时后结束 ThreadPool.UnsafeQueueUserWorkItem() 1 非原生支持1 非原生支持 非原生支持3 不支持 Thr ...

  6. 【AsyncTask整理 1】 AsyncTask几点要注意的地方

    问题1:AsyncTask是多线程吗? 答:是. 问题2:AsyncTask与Handler相比,谁更轻量级? 答:通过看源码,发现AsyncTask实际上就是一个线程池,而网上的说法是AsyncTa ...

  7. 【Java线程池快速学习教程】

    1. Java线程池 线程池:顾名思义,用一个池子装载多个线程,使用池子去管理多个线程. 问题来源:应用大量通过new Thread()方法创建执行时间短的线程,较大的消耗系统资源并且系统的响应速度变 ...

  8. VMware系统运维（五）安装SSO vCenter Single Sign-On

    1.前面我们做了很多准备工作,安装了很多需求部件,这时候再安装,必备条件无,这是简单安装,即自动安装,点击"安装". 2.简单安装,提示内存不足,需要4GB以上,加内存,重新安装. ...

  9. hdu 3663 DLX

    思路:把每个点拆成(d+1)*n列,行数为可拆分区间数.对所有的有i号点拆分出来的行都要建一条该行到i列的边,那么就能确保有i号点拆出来的行只能选择一行. #include<set> #i ...

  10. 转： android apk 防止反编译技术（1~5连载）

    转: android apk 防止反编译技术 做android framework方面的工作将近三年的时间了,现在公司让做一下android apk安全方面的研究,于是最近就在网上找大量的资料来学习. ...