JS判断鼠标从什么方向进入一个容器

牛魔王的世界观 2012-10-22 22:13:29 累计浏览 5,256 次

本机暂存

内容概览

这篇讲的是如何用JavaScript判断鼠标从哪个方向进入一个页面元素。作者从一个常见的交互需求出发：想让元素的进入动画能根据鼠标来的方向“动态响应”，比如从左边进就从左往右滑入。

最初他想的方案是在容器四边放隐形块来“碰瓷”鼠标事件，但觉得太麻烦。后来他发现了一个基于jQuery的巧妙解法，其核心在于一行计算角度的数学公式：`direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4`。这行代码通过反正切函数计算出鼠标进入点相对于容器中心的角度，再将其映射为“上、右、下、左”四个离散方向（对应数值0,1,2,3）。

作者坦言自己最初也没完全看懂背后的数学原理，但这不妨碍他应用这个方案。文章不仅提供了完整的jQuery示例代码，还贴心地附上了不依赖库的原生JavaScript实现版本。在原生版本中，他使用了`mouseover/mouseout`事件，并考虑了IE的`attachEvent`兼容性处理，但提醒读者关于事件冒泡的细节需自行处理。对于需要实现类似创意悬停效果的开发者来说，这篇文章提供了一个可以直接拿来用的实用代码片段。

偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题。首先想到的是给容器的四个边添加几个块，然后看鼠标进入的时候哪个块先监听到鼠标事件。不过这样麻烦太多了。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://www.niumowang.org/wp-content/themes/pizi/jquery-1.6.4.min.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>

鼠标移动到上面，可以看到效果。其中返回的dire

<!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://www.niumowang.org/wp-content/themes/pizi/jquery-1.6.4.min.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);
}

ction的值为“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;
}

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);
}

同分类推荐文章

translateZ() （2026-06-25 21:18:56）
translateY() （2026-06-25 21:17:56）
translateX() （2026-06-25 21:16:01）

查看更多前端文章 →

建议继续学习

JQuery实现Excel表格呈现（累计阅读 48,350）
深入理解Javascript之执行上下文(Execution Context) （累计阅读 18,404）
从输入 URL 到页面加载完成的过程中都发生了什么事情？（累计阅读 15,933）
图片动态局部毛玻璃模糊效果的实现（累计阅读 14,849）
天朝第二代身份证号码的验证机制（累计阅读 14,763）
HTML 5 的data-* 自定义属性（累计阅读 14,349）
分享一个JQUERY颜色选择插件（累计阅读 14,223）
什么是全栈工程师？（累计阅读 14,038）
快速排序（Quicksort）的Javascript实现（累计阅读 11,735）
7 天打造前端性能监控系统（累计阅读 11,188）