快捷導(dǎo)航

利用JS判斷鼠標(biāo)移入元素的方向

更新時間：2016年12月11日 10:12:19 作者：cometwo

本文對JS判斷鼠標(biāo)移入元素的方向的實現(xiàn)方法進行介紹，并分享了完整的示例代碼，有需要的朋友可以看下

最終效果

這里的關(guān)鍵主要是判斷鼠標(biāo)是從哪個方向進入和離開的

$("li").on("mouseenter mouseleave",function(e) {
   var w = this.offsetWidth;
   var h = this.offsetHeight;
   var x = e.pageX - this.getBoundingClientRect().left - w/2;
   var y = e.pageY - this.getBoundingClientRect().top - h/2;
   var direction = Math.round((((Math.atan2(y, x) * 180 / Math.PI) + 180) / 90) + 3) % 4; //direction的值為“0,1,2,3”分別對應(yīng)著“上，右，下，左”
   var eventType = e.type;
   var res = Math.atan2(y, x) / (Math.PI / 180) + 180 ;
   $('.line').css('transform','rotate('+ res +'deg)');
   // console.log(((Math.atan2(y, x) * 180 / Math.PI) + 180));
   // console.log(Math.round((Math.atan2(y, x) / (Math.PI / 180) + 180) / 90 + 3) % 4);
   var dirName = new Array('上方','右側(cè)','下方','左側(cè)');
    $('.res').text(res + 'deg');
   if(eventType == 'mouseenter'){
    $('.res').text(dirName[direction]+'進入');
    animationIn(direction);
   }else{
    $('.res').text(dirName[direction]+'離開');
    animationOut(direction);
   }
  });

上面代碼的重點主要是在direction的值的計算

Math.atan2(y,x) 返回-PI 到 PI 之間的值(負(fù)180°到正180°)，是從 X 軸正向逆時針旋轉(zhuǎn)到點 (x,y) 時經(jīng)過的角度這里的結(jié)果是一個弧度值。那如何把這個值轉(zhuǎn)換為角度呢

我們可以先算出一個角度的弧度值(Math.PI / 180) ，然后用上面計算出來的結(jié)果除以一度的弧度值

從上圖可以看出，當(dāng)鼠標(biāo)從右邊進入的時候，角度是在-45°~45°之間的底部是45~135 左邊135~180&-180~-135 頂部是 -135 ~ -45

因為上面計算出來的結(jié)果不符合我們的習(xí)慣，并且負(fù)值在計算的時候會影響正確性，現(xiàn)在我們給這個結(jié)果加上180 讓角度范圍變成我們習(xí)慣的0~360°。當(dāng)加上180之后 0°的位置就在左邊的中間了

0度的位置

所以現(xiàn)在的范圍變成了

0~44 & 360~315 左邊

45~134 上邊

135~224 右邊

225~314 下邊

我們再繼續(xù)轉(zhuǎn)換，現(xiàn)在我們把算出來的角度除以90，然后四舍五入，可以使得45°為分界線

上邊算出來的結(jié)果為1

上邊

右邊算出來的結(jié)果為2

右邊

下邊算出來的結(jié)果為3

下邊

左邊算出來的結(jié)果有兩種 0~44肯定是為0的 315~360 為4

左邊

現(xiàn)在算出來的結(jié)果一共有5個值（左邊2個，其他三個面各一個）。下面我們再精簡一下結(jié)果，我們給每次的結(jié)果都加上3，然后和4取余

左邊加3之后就是3和7，然后取余后為3

上邊加3之后為4，取余后為0

右邊加3為5，取余為1

下邊加3為6，取余為2

我們最終的結(jié)果就是 0->上邊 1->右邊 2->下邊 3->左邊然后我們通過控制left和top就可以實現(xiàn)上面的效果了

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
   * {
    padding: 0;
    margin: 0;
   }
    
   html,
   body {
    width: 100%;
    height: 100%;
   }
    
   ul {
    list-style: none;
    position: relative;
    width: 600px;
    width: 100%;
   }
    
   ul> li {
    margin: 50px auto;
    position: relative;
    width: 300px;
    height: 300px;
    background-color: black;
    overflow: hidden;
   }
    
   ul> li .bg {
    position: absolute;
    width: 300px;
    height: 300px;
    left: -100%;
    top: 0;
    background-color: red;
    text-align: center;
    line-height: 300px;
    color: blue;
    font-size: 150px;
   }
    
   .line {
    position: absolute;
    width: 50%;
    height: 1px;
    background: red;
    right: 0;
    top: 50%;
    transition: all .3s;
    transform-origin: left;
   }
    
   .res {
    text-align: center;
   }
  </style>
 </head>
 
 <body>
  <ul>
   <li>
    <div class="bg">
     SB
    </div>
   </li>
  </ul>
  <div class="res"></div>
  <script src="js/jquery-3.1.1.js"></script>
  <script>
   $("li").on("mouseenter mouseleave", function(e) {
    var $bg = $(this).find('.bg');
    var w = this.offsetWidth; //獲取元素寬度
    var h = this.offsetHeight; //獲取元素高度
    var toTop = this.getBoundingClientRect().top + document.body.scrollTop; //兼容滾動條
    var x = e.pageX - this.getBoundingClientRect().left - w / 2; //獲取當(dāng)前鼠標(biāo)的x軸位置（相對于這個li的中心點）
    var y = e.pageY - toTop - h / 2; ////獲取當(dāng)前鼠標(biāo)的y軸位置（相對于這個li的中心點）
    var direction = Math.round((((Math.atan2(y, x) * 180 / Math.PI) + 180) / 90) + 3) % 4; //direction的值為“0,1,2,3”分別對應(yīng)著“上，右，下，左”
    var eventType = e.type;
    var res = Math.atan2(y, x) / (Math.PI / 180) + 180;
    $('.line').css('transform', 'rotate(' + res + 'deg)');
    var dirName = new Array('上方', '右側(cè)', '下方', '左側(cè)');
    if(eventType == 'mouseenter') {
     $('.res').text(dirName[direction] + '進入');
     animationIn(direction, $bg);
    } else {
     $('.res').text(dirName[direction] + '離開');
     animationOut(direction, $bg);
    }
   });
   function animationIn(direction, ele) {
    switch(direction) {
     case 0:
      ele.css({
       left: 0,
       top: '-100%'
      }).animate({
       top: 0
      }, 300);
      break;
     case 1:
      ele.css({
       left: '100%',
       top: 0
      }).animate({
       left: 0
      }, 300);
      break;
     case 2:
      ele.css({
       left: 0,
       top: '100%'
      }).animate({
       top: 0
      }, 300);
      break;
     case 3:
      ele.css({
       left: '-100%',
       top: 0
      }).animate({
       left: 0
      }, 300);
      break;
    }
   }
   function animationOut(direction, ele) {
    switch(direction) {
     case 0:
      ele.animate({
       top: '-100%'
      }, 300);
      break;
     case 1:
      ele.animate({
       left: '100%'
      }, 300);
      break;
     case 2:
      ele.animate({
       top: '100%'
      }, 300);
      break;
     case 3:
      ele.animate({
       left: '-100%'
      }, 300);
      break;
    }
   }
  </script>
 </body>
</html>

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

您可能感興趣的文章: