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
时间： 2024-09-29 02:38:30