Javascript實現鼠標移入方向感知

本文介紹了JavaScript檢測鼠標移動方向的方法，涉及javascript鼠標操作的相關技巧，供大家參考，具體內容如下

判斷鼠標移入方向的功能函數

  function getDir(ev, ele) {        var l = ele.getBoundingClientRect().left;        var t = ele.getBoundingClientRect().top;        var w = ele.getBoundingClientRect().width;        var h = ele.getBoundingClientRect().height;        var x = (ev.clientX - l - w / 2) * (w > h ? (h / w) : 1);        var y = (ev.clientY - t - h / 2) * (h > w ? (w / h) : 1);        var deg = Math.atan2(y, x) / (Math.PI / 180);        var d = (Math.round((deg + 180) / 90) + 3) % 4;        return d;        // d的值{上:0,右:1,下:2,左:3}   }

整體代碼：

html:

        故事成功地將原本隱藏在黑暗中，用世界上最強大的毅力和最艱辛的努力去做最密不可宣和隱諱殘酷的事情的忍者，描繪成了太陽下最值得驕傲最光明無限的職業。在岸本齊史筆下的忍者世界中，每一位年輕的忍者都在開拓著屬於自己的忍道。

CSS:

  *{    margin: 0;    padding: 0;  }    #container{    width: 400px;    height: 200px;    position: relative;    margin-top: 100px;    margin-left: 200px;    overflow: hidden;      }  #container img{    width: 100%;    height: 100%;    transition: 0.5s;  }  #container p{    width: 100%;    height: 100%;    padding: 10px;    box-sizing: border-box;    position: absolute;    left: 0;    /* top: 0; */    background: rgba(0, 0, 0, .7);    color: #ccc;    font-size: 14px;    line-height: 24px;      }  #container:hover img{    transform: scale(1.1);  }

JS:

  window.onload = function () {        var box = document.getElementById('container');        var ps = document.getElementsByClassName('ps');        var pos=[          {left:0,top:'-100%'},          {left:'100%',top:0},          {left:0,top:'100%'},          {left:'-100%',top:0}        ]        box.onmouseenter = function(ev){          var dir = getDir(ev,this);          ps[0].style.transition='';          ps[0].style.left=pos[dir].left;          ps[0].style.top=pos[dir].top;          setTimeout(function(){            ps[0].style.transition='.3s';            ps[0].style.left=0;            ps[0].style.top=0;          },1000/60)        }        box.onmouseleave = function(ev){          var dir = getDir(ev,this);          setTimeout(function(){            ps[0].style.transition='';            ps[0].style.left=pos[dir].left;            ps[0].style.top=pos[dir].top;          },100)        }      }      function getDir(ev, ele) {        var l = ele.getBoundingClientRect().left;        var t = ele.getBoundingClientRect().top;        var w = ele.getBoundingClientRect().width;        var h = ele.getBoundingClientRect().height;        var x = (ev.clientX - l - w / 2) * (w > h ? (h / w) : 1);        var y = (ev.clientY - t - h / 2) * (h > w ? (w / h) : 1);        var deg = Math.atan2(y, x) / (Math.PI / 180);        var d = (Math.round((deg + 180) / 90) + 3) % 4;        return d;        // d的值{上:0,右:1,下:2,左:3}  }