首页 > 代码库 > 判断鼠标进入元素的方向
判断鼠标进入元素的方向
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){//IE55 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 values14 divide by 90 to get the quadrant15 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
<style></style>判断鼠标进入元素的方向
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。