欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery獲取鼠標(biāo)進(jìn)入和離開容器的方向

 更新時間：2016年12月29日 14:18:56   作者：Kalo  
本文主要分享了基于JQuery的獲取鼠標(biāo)進(jìn)入和離開容器方向的實(shí)現(xiàn)代碼，具有一定的參考價值。下面跟著小編一起來看下吧

做動畫時，需要判斷鼠標(biāo)進(jìn)入和退出容器的方向。網(wǎng)上找到的基于JQuery的實(shí)現(xiàn)方法，用函數(shù)封裝了一下，寫了一個示例。注意綁定鼠標(biāo)事件用的是on()，所以JQuery版本需高于1.7。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>判斷鼠標(biāo)從哪個方向進(jìn)入和離開容器</title>
  <script src="js/jquery-3.1.1.min.js"></script>
  <style>
   *{border: 0;margin: 0;padding: 0;}
   .item{width: 300px; height: 200px;border: 1px solid #999;margin: 50px;}
  </style>
 </head>
 <body>
  <div class="item">
  </div>
  <p id="info"></p>
 </body>
 <script>
  /**
   * 判斷鼠標(biāo)從哪個方向進(jìn)入和離開容器
   * @param {Object} tag JQuery對象，事件綁定的主體
   * @param {Object} e event對象
   * @return {Number} direction 值為“0,1,2,3”分別對應(yīng)著“上，右，下，左”
   */
  function moveDirection(tag,e){
   var w = $(tag).width();
   var h = $(tag).height();
   var x = (e.pageX - tag.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
   var y = (e.pageY - tag.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
   var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; 
   return direction;
  }
  //使用方法
  $(".item").on("mouseenter mouseleave", function (e) {
   var eType = e.type;
   var direction = moveDirection(this,e);
   var dirName = new Array("上","右","下","左");
   if(eType == "mouseenter"){
    $("#info").text("鼠標(biāo)從"+dirName[direction]+"方進(jìn)入方框");
   }else if(eType == "mouseleave"){
    $("#info").text("鼠標(biāo)從"+dirName[direction]+"方離開方框");
   }
  });
 </script>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

相關(guān)文章

最新評論