JQuery获取鼠标进入和离开容器的方向
做动画时，需要判断鼠标进入和退出容器的方向。网上找到的基于JQuery的实现方法，用函数封装了一下，写了一个示例。注意绑定鼠标事件用的是on()，所以JQuery版本需高于1.7。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>判断鼠标从哪个方向进入和离开容器</title>
<scriptsrc="js/jquery-3.1.1.min.js"></script>
<style>
*{border:0;margin:0;padding:0;}
.item{width:300px;height:200px;border:1pxsolid#999;margin:50px;}
</style>
</head>
<body>
<divclass="item">
</div>
<pid="info"></p>
</body>
<script>
/**
*判断鼠标从哪个方向进入和离开容器
*@param{Object}tagJQuery对象，事件绑定的主体
*@param{Object}eevent对象
*@return{Number}direction值为“0,1,2,3”分别对应着“上，右，下，左”
*/
functionmoveDirection(tag,e){
varw=$(tag).width();
varh=$(tag).height();
varx=(e.pageX-tag.offsetLeft-(w/2))*(w>h?(h/w):1);
vary=(e.pageY-tag.offsetTop-(h/2))*(h>w?(w/h):1);
vardirection=Math.round((((Math.atan2(y,x)*(180/Math.PI))+180)/90)+3)%4;
returndirection;
}
//使用方法
$(".item").on("mouseentermouseleave",function(e){
vareType=e.type;
vardirection=moveDirection(this,e);
vardirName=newArray("上","右","下","左");
if(eType=="mouseenter"){
$("#info").text("鼠标从"+dirName[direction]+"方进入方框");
}elseif(eType=="mouseleave"){
$("#info").text("鼠标从"+dirName[direction]+"方离开方框");
}
});
</script>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！