js判断鼠标从什么方向进入容器的算法 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 2 <html xmlns="http://www.w3.org/1999/xhtml">  
 3 <head>  
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
 5 <title>判断鼠标从什么方向进入容器的算法分析</title>  
 6 <script type="text/javascript" src="http://www.86y.org/js/jq.js"></script>  
 7 </head>  
 8 <body>  
 9 <div id="result">测试：</div>  
10 <div id="wrap" style="width:200px;height: 200px;border: 1px solid #99bbe8;"></div>  
11 <script>  
12 $("#wrap").bind("mouseenter mouseleave",function(e) {  
13          var w = $(this).width();  
14          var h = $(this).height();  
15          var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);  
16          var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);  
17          var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”  
18          var eeventType = e.type;  
19          var dirName = new Array('上方','右侧','下方','左侧');  
20          if(e.type == 'mouseenter'){  
21              $("#result").html("测试："+dirName[direction]+'进入');  
22          }else{  
23              $('#result').html("测试："+dirName[direction]+'离开');  
24          }  
25      });  
26 </script>  
27 </body>  
28 </html>

 

转载自：http://www.86y.org/art_detail.aspx?id=712

posted @ 2016-09-08 14:48  杨潇love  阅读(97)  评论(0)  编辑  收藏  举报