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

Question

I'm trying to add eyes that follow the mouse to the head of my site. I'm using code I found and here is my jsfiddle . I've found many examples and posts about some object following the mouse. But the problem is that they all work only for the div they are in. To show this, I added red lines around the eyes in my example. The eyes follow all mouse movement while the mouse is in that box. But if the mouse is scrolled outside of the box, it is no longer followed. Is there a way to have the eyes follow the mouse no matter where the mouse is on the page?

    <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

Attach the mousemove listener to document rather than to .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

If you want "cockeyed" try this. I modified CertaniPerformance's code by separating the two eyes.

 $(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>