鼠标进入盒子方向判断

我们在网页上经常看到这种效果，就是鼠标从方块的四个不同方向移入方块时会展示不同的效果，实现这种效果首要的就是判断鼠标移入的方向，判断方向的方法有很多，今天我们就说其中的一种实现方法。

先看一个示意图

通过示意图我们很容易求出角α的弧度为：α = arctan(m/n)，这里使用的是反三角函数中的反正切。同样的方法也可以得出β角的大小。
当β > α时，我们就可以确定a点在矩形的上方进入，反之就是在右方进入。四个方向都可以这样判断。由此，问题就简单了，我们需要求的就是这个角度，而求角度要知道的只是其对边和斜边，而根据点的位置，这两边非常容易得出。

判断方向的方法我封装成jquery插件。

// 传入参数必须是一个、四个或八个，传入的参数必须是函数，函数有一个参数代表当前对象
(function ($) {
   
  $.fn.extend({
   
    intoDir () {
   
      var arg = arguments
      return this.each(function (i, s) {
   
        // 监听mouseover事件
        $(s).mouseover(function (e) {
   
           // 获取进入点在块中的位置
          var x = e.offsetX, y = e.offsetY
          var sw = $(this).outerWidth(), sh = $(this).outerHeight()
          var dir = dirGet(x, y, sw, sh)
          // 根据方向依次运行需采取的动作
          var len = arg.length
          if (len == 1) {
   
            arg