判断鼠标动作，可以给鼠标在标签不同区域的动作分别写不同的效果
最近实现一些弹出层的页面效果，用到了需要针对鼠标从标签的不对方位进入或滑出而实现不同的效果，记录一下判断鼠标事件的demo，以便以后使用
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>判断鼠标动作，可以给鼠标在标签不同区域的动作分别写不同的效果</title> <script src="../js/jquery-1.9.1.min.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(function(){ $("#divmsg").bind("mouseout", function(e) { var w = $(this).width(); var h = $(this).height(); var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1); var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; if(direction==0) { $("#divmsg").html("上部离开"); } else if(direction==1) { $("#divmsg").html("右侧离开"); } else if(direction==2) { $("#divmsg").html("下部离开"); } else if(direction==3) { $("#divmsg").html("左侧离开"); } }); $("#divmsg").bind("mouseover", function(e) { var w = $(this).width(); var h = $(this).height(); var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1); var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; if(direction==0) { $("#divmsg").html("上部进入"); } else if(direction==1) { $("#divmsg").html("右侧进入"); } else if(direction==2) { $("#divmsg").html("下部进入"); } else if(direction==3) { $("#divmsg").html("左侧进入"); } }); }) </script> </head> <body> <form id="form1" runat="server"> <div id="divmsg" style="width:200px; height:200px; background-color:Gray; color:Red; text-align:center; font-size:larger; font-weight:bold; margin-left:100px;"> 判断鼠标动作 </div> </form> </body> </html>
