判断鼠标进入元素的方向
javascript版：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>判断鼠标进入和离开容器的方向</title> 6 <style> 7 #test{ 8 width: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>
效果：
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
