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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!