判斷滑鼠指標移入移出的方向程式碼例項

antzone發表於2017-04-18
指標

分享一段程式碼例項，它實現了判斷滑鼠指標移入移出方向的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body, html, ul, p, h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
body {
  padding-top: 100px;
  text-align: center;
}
.box {
  width: 300px;
  height: 200px;
  margin: 10px auto;
  border: 1px solid #ccc;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
.content {
  position: absolute;
  z-index: 2;
  background-color: lightcoral;
  width: 100%;
  height: 100%;
  left: -100%;
  top: -100%;
  line-height: 198px;
  text-align: center;
  color: #fff;
  font-size: 70px;
}
.content.trans {
  transition: all .2s;
  backface-visibility: hidden;
}
</style>
</head>
<body>
  <div class="box">
    <div class="content">1</div>
  </div><div class="box">
    <div class="content">2</div>
  </div><div class="box">
    <div class="content">3</div>
  </div><div class="box">
    <div class="content">4</div>
  </div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
//這個模組完成滑鼠方向判斷的功能
var MouseDirection = function(element, opts) {
  var $element = $(element);
  //enter leave代表滑鼠移入移出時的回撥
  opts = $.extend({}, {
    enter: $.noop,
    leave: $.noop
  }, opts || {});
 
  var dirs = ['top', 'right', 'bottom', 'left'];
  var calculate = function(element, e) {
    /*以瀏覽器可視區域的左上角建立座標系*/
    //表示左上角和右下角及中心點座標
    var x1, y1, x4, y4, x0, y0;
    //表示左上角和右下角的對角線斜率
    var k;
    //用getBoundingClientRect比較省事，而且它的相容性還不錯
    var rect = element.getBoundingClientRect();
    if (!rect.width) {
      rect.width = rect.right - rect.left;
    }
    if (!rect.height) {
      rect.height = rect.bottom - rect.top;
    }
    //求各個點座標 注意y座標應該轉換為負值，因為瀏覽器可視區域左上角為(0,0)，整個可視區域屬於第四象限
    x1 = rect.left;
    y1 = -rect.top;
 
    x4 = rect.left + rect.width;
    y4 = -(rect.top + rect.height);
 
    x0 = rect.left + rect.width / 2;
    y0 = -(rect.top + rect.height / 2);
 
    //矩形不夠大，不考慮
    if (Math.abs(x1 - x4) < 0.0001) return 4;
    //計算對角線斜率
    k = (y1 - y4) / (x1 - x4);
    var range = [k, -k];
    //表示滑鼠當前位置的點座標
    var x, y;
    x = e.clientX;
    y = -e.clientY;
    //表示滑鼠當前位置的點與元素中心點連線的斜率
    var kk;
    kk = (y - y0) / (x - x0);
    //如果斜率在range範圍內，則滑鼠是從左右方向移入移出的
    if (isFinite(kk) && range[0] < kk && kk < range[1]) {
      //根據x與x0判斷左右
      return x > x0 ? 1 : 3;
    } else {
      //根據y與y0判斷上下
      return y > y0 ? 0 : 2;
    }
  };
 
  $element.on('mouseenter', function(e) {
    var r = calculate(this, e);
    opts.enter($element, dirs[r]);
  }).on('mouseleave', function(e) {
    var r = calculate(this, e);
    opts.leave($element, dirs[r]);
  });
};
 
var DIR_POS = {
  left: {
    top: '0',
    left: '-100%'
  },
  right: {
    top: '0',
    left: '100%'
  },
  bottom: {
    top: '100%',
    left: '0'
  },
  top: {
    top: '-100%',
    left: '0'
  }
};
$('.box').each(function() {
  new MouseDirection(this, {
    enter: function($element, dir) {
      //每次進入前先把.trans類移除掉，以免後面調整位置的時候也產生過渡效果
      var $content = $element.find('.content').removeClass('trans');
      //調整位置
      $content.css(DIR_POS[dir]);
      //reflow
      $content[0].offsetWidth;
      //啟用過渡
      $content.addClass('trans');
      //滑入
      $content.css({
        left: '0',
        top: '0'
      });
    },
    leave: function($element, dir) {
      $element.find('.content').css(DIR_POS[dir]);
    }
  });
});
</script>
</body>
</html>

相關文章