如何讓眼睛在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>

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>