JQuery獲取鼠標進入和離開容器的方向

更新時間：2016年12月29日 14:18:56 作者：Kalo

本文主要分享了基于JQuery的獲取鼠標進入和離開容器方向的實現(xiàn)代碼，具有一定的參考價值。下面跟著小編一起來看下吧

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>判斷鼠標從哪個方向進入和離開容器</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>
  /**
   * 判斷鼠標從哪個方向進入和離開容器
   * @param {Object} tag JQuery對象，事件綁定的主體
   * @param {Object} e event對象
   * @return {Number} direction 值為“0,1,2,3”分別對應著“上，右，下，左”
   */
  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("鼠標從"+dirName[direction]+"方進入方框");
   }else if(eType == "mouseleave"){
    $("#info").text("鼠標從"+dirName[direction]+"方離開方框");
   }
  });
 </script>
</html>

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

您可能感興趣的文章:

相關(guān)文章

jquery取消事件冒泡的三種方法(推薦)
下面小編就為大家?guī)硪黄猨query取消事件冒泡的三種方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-05-05
jquery中cookie用法實例詳解(獲取,存儲,刪除等)
這篇文章主要介紹了jquery中cookie用法,結(jié)合實例詳細分析了jQuery操作cookie的獲取,存儲,刪除等操作,并附帶了Jquery操作Cookie記錄用戶查詢過信息實現(xiàn)方法,需要的朋友可以參考下
2016-01-01
jQuery 防止相同的事件快速重復觸發(fā)方法
下面小編就為大家分享一篇jQuery 防止相同的事件快速重復觸發(fā)方法。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
jquery+ajax實現(xiàn)上傳圖片并顯示上傳進度功能【附php后臺接收】
這篇文章主要介紹了jquery+ajax實現(xiàn)上傳圖片并顯示上傳進度功能,結(jié)合實例形式分析了jQuery+ajax結(jié)合layer.js插件與php后臺交互,實現(xiàn)顯示上傳進度的相關(guān)操作技巧,需要的朋友可以參考下
2019-06-06
通過JQuery實現(xiàn)win8一樣酷炫的動態(tài)磁貼效果(示例代碼)
相信大家喜歡這個界面無非也是喜歡它的動態(tài)磁貼。剛好今天研究了一下如何通過JQuery在網(wǎng)頁上模仿這種效果，就貼出來給大家噴一下。雖然是一些很低級的技術(shù)，但是也希望有需要的朋友可以參考下
2013-07-07
jquery 無限級下拉菜單的簡單實現(xiàn)代碼
本篇文章主要是對jquery 無限級下拉菜單的簡單實現(xiàn)代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
JQuery Dialog對話框不能通過Esc關(guān)閉的原因分析及解決辦法
這篇文章主要介紹了JQuery Dialog對話框不能通過Esc關(guān)閉的原因分析及解決辦法,需要的朋友可以參考下
2017-01-01
JQuery中serialize()、serializeArray()和param()方法示例介紹
serialize()方法也是作用于一個JQuery對象，它能夠?qū)OM元素內(nèi)容序列化為字符串，serializeArray()方法不是返回字符串，而是將DOM元素序列化后，返回JSON格式的數(shù)據(jù)
2014-07-07
對jquery的ajax進行二次封裝以及ajax緩存代理組件:AjaxCache詳解
下面小編就為大家?guī)硪黄獙query的ajax進行二次封裝以及ajax緩存代理組件:AjaxCache詳解。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-04-04
基于jQuery選擇器的整理集合
本篇文章介紹了，基于jQuery選擇器的整理集合。需要的朋友參考下
2013-04-04