收藏本站投递资讯前端导航

前端资讯

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 1518|回复: 2

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

[复制链接]
发表于 2012-11-4 16:31:48 | 显示全部楼层 |阅读模式
js判断从哪个方向进入容器

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


说实话,其中的var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;这句用到的数学知识我是真没有看明白,原文中有一些英文注释我就不一一说明了。代码部分不是很多,我直接写了个示例。
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>判断鼠标进入方向</title>
  6. </head>
  7. <body>
  8. <style>
  9. html,body{margin:0;padding:0;}
  10. #wrap{width:300px;height:300px;background:#33aa00;margin:50px;display:inline-block;font-size:50px;text-align:center;line-height:300px;}
  11. </style>
  12. <div id="wrap">
  13.          方向反馈
  14. </div>
  15. <script type="text/javascript" src="http://www.niumowang.org/wp-content/themes/pizi/jquery-1.6.4.min.js"></script>
  16. <script>
  17. $("#wrap").bind("mouseenter mouseleave",
  18. function(e) {
  19.         var w = $(this).width();
  20.         var h = $(this).height();
  21.         var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
  22.         var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
  23.         var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
  24.         var eventType = e.type;
  25.         var dirName = new Array('上方','右侧','下方','左侧');
  26.         if(e.type == 'mouseenter'){
  27.                 $(this).html(dirName[direction]+'进入');
  28.         }else{
  29.                 $(this).html(dirName[direction]+'离开');
  30.         }
  31. });
  32. </script>
  33. </body>
  34. </html>
复制代码

鼠标移动到上面,可以看到效果。其中返回的direction的值为“0,1,2,3”分别对应着“上,右,下,左”
所以结果值可以switch循环
  1. switch (direction) {
  2.   case 0:
  3.         $(this).html('上方进入');
  4.         break;
  5.   case 1:
  6.         $(this).html('右侧进入');
  7.         break;
  8.   case 2:
  9.         $(this).html('下方进入');
  10.         break;
  11.   case 3:
  12.         $(this).html('左侧进入');
  13.         break;
  14. }
复制代码

原文代码是基于jquery的,后面我写了个原生的js效果,代码没有封装,给需要的朋友。由于firefox等浏览器不支持mouseenter,mouseleave事件,所以我暂时用mouseover,mouseout代替了,如果大家需要解决冒泡问题的话,还是自行搜索兼容性解决方法吧。
  1. var wrap = document.getElementById('wrap');
  2. var hoverDir = function(e){
  3.         var w=wrap.offsetWidth;
  4.         var h=wrap.offsetHeight;
  5.         var x=(e.clientX - wrap.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
  6.         var y=(e.clientY - wrap.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
  7.         var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
  8.         var eventType = e.type;
  9.         var dirName = new Array('上方','右侧','下方','左侧');
  10.         if(e.type == 'mouseover' || e.type == 'mouseenter'){
  11.                 wrap.innerHTML=dirName[direction]+'进入';
  12.         }else{
  13.                 wrap.innerHTML=dirName[direction]+'离开';
  14.         }
  15. }
  16. if(window.addEventListener){
  17.         wrap.addEventListener('mouseover',hoverDir,false);
  18.         wrap.addEventListener('mouseout',hoverDir,false);
  19. }else if(window.attachEvent){
  20.         wrap.attachEvent('onmouseenter',hoverDir);
  21.         wrap.attachEvent('onmouseleave',hoverDir);
  22. }
复制代码


回复

使用道具 举报

发表于 2013-4-8 11:33:25 | 显示全部楼层
这个比较好。。其中那句是根据角度来判断的吧。。计算出来鼠标和div中心的夹角,然后各种转换。。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则