jQuery獲取滑鼠從哪個方向移入和移出元素

antzone發表於2017-04-12
jQuery

本章節分享一段程式碼例項，它可以實現獲取滑鼠進入元素和移出元素的方向。

需要的朋友可以做一下參考，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box {
  width:100px;
  height:100px;
  background:#dddddd;
  margin:100px;
  text-align:center;
  line-height:100px;
  font-size:12px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var wen_direction = (function () {
  var jqDirection;
  function Direction(id) {
    this.id = document.getElementById(id) || id ;
  }
  Direction.prototype.init = function (enterObj, leaveObj) {
    //滑鼠滑入元素
    var self = this;
    this.id.addEventListener('mouseenter', function (e) {
      //返回數字  返回0:上方進入， 返回1:右方進入，返回2：下方進入，返回3：左方進入
      var directionNumber = self.main(e); 
      var funArray = [enterObj.top, enterObj.right, enterObj.bottom, enterObj.left];
      funArray[directionNumber](self.id);
    },false);
    this.id.addEventListener('mouseleave', function (e) {
      //返回數字  返回0:上方離開， 返回1:右方離開，返回2：下方離開，返回3：左方離開
      var directionNumber = self.main(e); 
      var funArray = [leaveObj.top, leaveObj.right, leaveObj.bottom, leaveObj.left];
      funArray[directionNumber](self.id);
    },false);
  };
 
  /*主函式 返回數字來判斷從哪個方向進入*/
  Direction.prototype.main = function (e) {
    var w = this.id.scrollWidth;
    var h = this.id.scrollHeight;
    /*計算x和y得到一個角到elem的中心，得到相對於x和y值到div的中心*/
    var x = (e.offsetX - (w / 2)) * (w > h ? (h / w) : 1);
    var y = (e.offsetY - (h / 2)) * (h > w ? (w / h) : 1);
    /** 滑鼠從哪裡來 / 角度 和 方向出去順時針（得出的結果是TRBL 0 1 2 3
      * 首先計算點的角度，
      * 再加上180度擺脫負值
      * 除於90得到的象限（象限，又稱象限角，意思就是一個圓之四分之一等份）
      * 加上3，做一個模（求模 求餘數）4的象限轉移到一個適當的順時針 得出 TRBL 0 1 2 3（上/右/下/左）
    **/
    var number = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
    return number;
  };
 
  return {
    run: function (id, enterObj, leaveObj) {//這個介面用於原生js
      var directionChild = new Direction(id);
      directionChild.init(enterObj, leaveObj);
    }
  }
})();
 
//測試用例
var enterObject = {
  left: function(self) {
    self.innerHTML = "從左邊進入";
  },
  right: function(self) {
    self.innerHTML = "從右邊進入";
  },
  top: function(self) {
    self.innerHTML = "從上邊進入";
  },
  bottom: function(self) {
    self.innerHTML = "從下邊進入";
  }
};
 
var leaveObject = {
  left: function(self) {
    self.innerHTML = "從左邊離開";
  },
  right: function(self) {
    self.innerHTML = "從右邊離開";
  },
  top: function(self) {
    self.innerHTML = "從上邊離開";
  },
  bottom: function(self) {
    self.innerHTML = "從下邊離開";
  }
};
$(document).ready(function () {
  wen_direction.run('box', enterObject, leaveObject);
})
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>

相關文章