【jquery获取鼠标进入和离开容器的方法】JQuery获取鼠标进入和离开容器的方向的教程

【www.bbyears.com--jquery】

做动画时，需要判断鼠标进入和退出容器的方向。网上找到的基于JQuery的实现方法，用函数封装了一下，写了一个示例。注意绑定鼠标事件用的是on()，所以JQuery版本需高于1.7

          <script src="js/jquery-3.1.1.min.js"></script>                

   <script>   /**    * 判断鼠标从哪个方向进入和离开容器    * @param {Object} tag JQuery对象，事件绑定的主体    * @param {Object} e event对象    * @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("mouseenter mouseleave",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>

本文来源：http://www.bbyears.com/wangyezhizuo/117260.html