jquery - div 跟随鼠标但仍然附加到另一个 div [眼睛效果]

Question

我试图让另一个 div 内的一个 div 移动到我鼠标的方向，但是它永远不应该离开它在里面的 div，这正是它所做的。有没有办法让它卡在另一个 div 中？

$(document).on('mousemove', function(e) {
  $('#pupil').css({
    left: e.pageX,
    top: e.pageY
  });
});

#eye {
  position: absolute;
  height: 50px;
  width: 68px;
  border-radius: 100px;
  top: 132px;
  background-color: black;
}
#pupil {
  position: absolute;
  z-index: 3;
  width: 25px;
  height: 25px;
  border-radius: 100px;
  background-color: white;
}
#eye2 {
  position: absolute;
  height: 66px;
  width: 78px;
  border-radius: 100px;
  top: 125px;
  left: 200px;
  background-color: black;
}
#pupil2 {
  position: absolute;
  z-index: 3;
  width: 25px;
  height: 25px;
  border-radius: 100px;
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="eye">
  <div id="pupil"></div>
</div>
<div id="eye2">
  <div id="pupil2"></div>
</div>

这是一个fiddle还有!

感谢您的帮助!

Answer 1

使用这个:

<style>
  #eye {
  position: absolute;
  height: 50px;
  width: 68px;
  border-radius: 100px;
  top: 132px;
  background-color: black;
}
#pupil {
  position: absolute;
  z-index: 3;
  width: 25px;
  height: 25px;
  border-radius: 100px;
  background-color: white;
}
#eye2 {
  position: absolute;
  height: 66px;
  width: 78px;
  border-radius: 100px;
  top: 125px;
  left: 200px;
  background-color: black;
}
#pupil2 {
  position: absolute;
  z-index: 3;
  width: 25px;
  height: 25px;
  border-radius: 100px;
  background-color: white;
}
  </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="eye">
  <div id="pupil"></div>
</div>
<div id="eye2">
  <div id="pupil2"></div>
</div>



<script>
    var windowWidth = $(window).width();
        var windowHeight = $(window).height();

        var eyeWidth = $('#eye').width();
        var eye2Width = $('#eye2').width();

        var eyeHeight = $('#eye').height();
        var eye2Height = $('#eye2').height();

        var pupil = $('#pupil');
        var pupil2 = $('#pupil2');
        $(document).mousemove(function (e)
        {
            pupil.css('left', e.pageX * eyeWidth / windowWidth).css('top', e.pageY * eyeHeight / windowHeight);
        });

        $(document).mousemove(function (e)
        {
            pupil2.css('left', e.pageX * eye2Width / windowWidth).css('top', e.pageY * eye2Height / windowHeight);
        });
  </script>