判断鼠标进入元素的方向

javascript版：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>判断鼠标进入和离开容器的方向</title>
 6         <style>
 7             #test{
 8                 300px;
 9                 height:200px;
10                 border:1px solid red;
11             }
12         </style>
13         <script>
14             window.onload=function(){
15                             
16             var target=document.getElementById('test');
17             //得到鼠标进入元素的方向
18             function showDirection(e){
19                 //1、获取元素的宽高
20                 var 
21                     width=target.offsetWidth,
22                     height=target.offsetHeight;
23 
24                 //2、计算鼠标在以元素中心为原点的坐标系中的位置,并矫正位置
25                 var 
26                     x=(e.clientX-target.offsetLeft-width/2)*(width>height?(height/width):1),
27                     y=(e.clientY-target.offsetTop-height/2)*(height>width?(width/height):1);
28                 
29                 //3、计算方向（智商不足，没完全理解）
30                 /*
31                  * 3.1 atan2函数是计算点(x,y)与坐标系原点形成的线段与X轴的夹角  取值（-π,π）
32                  * 3.2 乘以(180/Math.PI)是将弧度装成角度
33                  * 3.3 加上180是为了消除负值对结果的影响
34                  * 3.4 除以90是为了判断当前鼠标在哪个象限
35                  * 3.5 加3对4取模 是为了把象限转换成合适的顺时针方向(上、右、下、左)
36                  * 
37                  * 计算结果为0、1、2、3分别对应上、右、下、左
38                 */
39                 var 
40                     direction=Math.round((((Math.atan2(y,x)*(180/Math.PI))+180)/90)+3)%4,
41                     dirName=['上','右','下','左'];
42                     
43                 if('mouseover'===e.type || 'mouseenter'===e.type){
44                     target.innerHTML='从【'+dirName[direction]+'】进入';
45                 }else{
46                     target.innerHTML='从【'+dirName[direction]+'】离开';
47                 }
48             }
49             
50             //事件监听
51             if(window.addEventListener){//DOM标准
52                 target.addEventListener('mouseover',showDirection,false);
53                 target.addEventListener('mouseout',showDirection,false);
54             }else if(window.attachEvent){//IE
55                 target.attachEvent('onmouseenter',showDirection);
56                 target.attachEvent('onmouseleave',showDirection);
57             }                
58             }
59         </script>
60     </head>
61     <body>
62         <div id="test"></div>
63     </body>
64 </html>

效果：

http://jsfiddle.net/aBK5Q/16/

jQuery版本：

 1 $(".overlayLink").bind("mouseenter mouseleave",function(e){
 2         /** the width and height of the current div **/
 3         var w = $(this).width();
 4         var h = $(this).height();
 5         
 6         /** calculate the x and y to get an angle to the center of the div from that x and y. **/
 7         /** gets the x value relative to the center of the DIV and "normalize" it **/
 8         var x = (e.pageX - this.offsetLeft - (w/2)) * ( w > h ? (h/w) : 1 );
 9         var y = (e.pageY - this.offsetTop  - (h/2)) * ( h > w ? (w/h) : 1 );
10         
11         /** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**/
12         /** first calculate the angle of the point, 
13          add 180 deg to get rid of the negative values
14          divide by 90 to get the quadrant
15          add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
16         var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 )  % 4;
17         
18         
19         /** do your animations here **/ 
20         switch(direction) {
21          case 0:
22           /** animations from the TOP **/
23          break;
24          case 1:
25           /** animations from the RIGHT **/
26          break;
27          case 2:
28           /** animations from the BOTTOM **/
29          break;
30          case 3:
31           /** animations from the LEFT **/
32          break;
33         }
34 });

参考：

http://stackoverflow.com/questions/3627042/jquery-animation-for-a-hover-with-mouse-direction

http://sentsin.com/web/112.html

这个更好理解http://blog.csdn.net/bluesky466/article/details/41706871