jQuery获取鼠标从哪个方向移入和移出元素

快乐打工仔发布于 1年前分类：实例代码

本章节分享一段代码实例，它可以实现获取鼠标进入元素和移出元素的方向。

需要的朋友可以做一下参考，代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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>

一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu

我来回复

暂无回复内容