快捷導(dǎo)航

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

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

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>判斷鼠標(biāo)從哪個(gè)方向進(jìn)入和離開(kāi)容器</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)從哪個(gè)方向進(jìn)入和離開(kāi)容器
   * @param {Object} tag JQuery對(duì)象，事件綁定的主體
   * @param {Object} e event對(duì)象
   * @return {Number} direction 值為“0,1,2,3”分別對(duì)應(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]+"方離開(kāi)方框");
   }
  });
 </script>
</html>

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

您可能感興趣的文章:

相關(guān)文章

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