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>

Answer 2

如果您想“曲棍球”，请尝试此操作。我通过分开两只眼睛来修改CertaniPerformance的代码。

$(document).mousemove(function(event) {
  var eye = $(".eye");
  var eye2 = $(".eye2");
  var x = (eye.offset().left) + (eye.width() / 2);
  var x2 = (eye2.offset().left) + (eye2.width() / 2);
  var y = (eye.offset().top) + (eye.height() / 2);
  var y2 = (eye2.offset().top) + (eye2.height() / 2);
  var rad = Math.atan2(event.pageX - x, event.pageY - y);
  var rad2 = Math.atan2(event.pageX - x2, event.pageY - y2);
  var rot = (rad * (180 / Math.PI) * -1) + 180;
  var rot2 = (rad2 * (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)'
  });
  eye2.css({
    '-webkit-transform': 'rotate(' + rot2 + 'deg)',
    '-moz-transform': 'rotate(' + rot2 + 'deg)',
    '-ms-transform': 'rotate(' + rot2 + 'deg)',
    'transform': 'rotate(' + rot2 + 'deg)'
  });
});

.move-area {
  position: relative;
  width: 100%;
  margin:0;
  padding:0;
  left:30px;
  top:30px;
}
.eye {
  position: relative;
    display: inline-block;
    border: solid 10px black;
    border-radius: 50%;
    height: 270px;
    width: 270px;
    background: white;
}
.eye:after { /*pupil*/
  position: absolute;
    top: 0;
    /* bottom: 34px; */
    right: 90px;
    width: 90px;
    height: 90px;
    background: #000;
    border-radius: 50%;
    content: " ";
}

.eye2 {
  position: relative;
    display: inline-block;
    border: solid 10px black;
    border-radius: 50%;
    height: 270px;
    width: 270px;
    background: white;
}
.eye2:after { /*pupil*/
  position: absolute;
    top: 0;
    /* bottom: 34px; */
    right: 90px;
    width: 90px;
    height: 90px;
    background: #000;
    border-radius: 50%;
    content: " ";
}

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

<div class="move-area" >
  <div class='.container'>
    <div class='eye'></div>
    <div class='eye2'></div>
  </div>
</div>


</div>

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

2 个答案: