javascript - 如何让眼睛跟随div之外的鼠标

Question

我正在尝试将跟随鼠标的眼睛添加到我网站的头部。我正在使用我找到的代码，这是我的 jsfiddle .我发现了很多关于跟随鼠标的对象的例子和帖子。但问题是它们都只对它们所在的 div 有效。为了说明这一点，我在我的示例中在眼睛周围添加了红线。当鼠标在那个盒子里时，眼睛会跟随鼠标的所有移动。但是如果鼠标滚动到框外，就不再跟随了。有没有办法让无论鼠标在页面上的什么位置，眼睛都跟随鼠标？

    <style>
    .move-area{/*normally use body*/
      width: 100vw;
      height: 100vh;
      padding: 10% 45%;
    }
    .container {
      width: 100%;
    }
    .eye {
      position: relative;
      display: inline-block;
      border-radius: 50%;
      height: 30px;
      width: 30px;
      background: #CCC;
    }
    .eye:after { /*pupil*/
      position: absolute;
      bottom: 17px;
      right: 10px;
      width: 10px;
      height: 10px;
      background: #000;
      border-radius: 50%;
      content: " ";
    }
    </style>

    <div style="height:200px;">
      <div class="move-area" style="height:30px;border:1px solid red;">
        <div class='.container'>
          <div class='eye'></div>
          <div class='eye'></div>
        </div>
      </div>
      <div>Text below the eyes</div>
    </div>

    <script>
    //This is a pen based off of Codewoofy's eyes follow mouse. It is just cleaned up, face removed, and then made to be a little more cartoony. https://codepen.io/Codewoofy/pen/VeBJEP

    $(".move-area").mousemove(function(event) {
      var eye = $(".eye");
      var x = (eye.offset().left) + (eye.width() / 2);
      var y = (eye.offset().top) + (eye.height() / 2);
      var rad = Math.atan2(event.pageX - x, event.pageY - y);
      var rot = (rad * (180 / Math.PI) * -1) + 180;
      eye.css({
        '-webkit-transform': 'rotate(' + rot + 'deg)',
        '-moz-transform': 'rotate(' + rot + 'deg)',
        '-ms-transform': 'rotate(' + rot + 'deg)',
        'transform': 'rotate(' + rot + 'deg)'
      });
    });
    </script>

Answer 1

将 mousemove 监听器附加到 document 而不是 .move-area:

$(document).mousemove(function(event) {
  var eye = $(".eye");
  var x = (eye.offset().left) + (eye.width() / 2);
  var y = (eye.offset().top) + (eye.height() / 2);
  var rad = Math.atan2(event.pageX - x, event.pageY - y);
  var rot = (rad * (180 / Math.PI) * -1) + 180;
  eye.css({
    '-webkit-transform': 'rotate(' + rot + 'deg)',
    '-moz-transform': 'rotate(' + rot + 'deg)',
    '-ms-transform': 'rotate(' + rot + 'deg)',
    'transform': 'rotate(' + rot + 'deg)'
  });
});

.move-area{/*normally use body*/
  width: 100vw;
  height: 100vh;
  padding: 10% 45%;
}
.container {
  width: 100%;
}
.eye {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  background: #CCC;
}
.eye:after { /*pupil*/
  position: absolute;
  bottom: 17px;
  right: 10px;
  width: 10px;
  height: 10px;
  background: #000;
  border-radius: 50%;
  content: " ";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:200px;">

<div class="move-area" style="height:30px;border:1px solid red;">
  <div class='.container'>
    <div class='eye'></div>
    <div class='eye'></div>
  </div>
</div>

<div>Text below the eyes</div>
</div>