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

如果有人希望能够做到这一点，这是一个较晚的答案：

$( document ).ready(function() {

var DrawEye = function(eyecontainer, pupil, eyeposx, eyeposy, eyer){
  $("#dolaneye").append("<div id='" + eyecontainer + "'><div id='" + pupil + "'></div></div>")
  
  eyecontainer = "#" + eyecontainer;
  pupil = "#" + pupil;
  
  $(eyecontainer).css({left:eyeposx, top:eyeposy});
  $(pupil).css({width:eyer*0.4,height:eyer*0.4});
  $(eyecontainer).css({width:eyer,height:eyer});
  $(pupil).css({position: 'relative', background: '#000000', 'border-radius':'50%'});
  $(eyecontainer).css({position:'absolute', background:'#FFFFFF', overflow:'hidden', 'border-radius': '50%'});
  
  // Initialise core variables
  var r = $(pupil).width()/2;
  var center = {
    x: $(eyecontainer).width()/2 - r, 
    y: $(eyecontainer).height()/2 - r
  };
  var distanceThreshold = $(eyecontainer).width()/2 - r;
  var mouseX = center.x, mouseY = center.y;
  
  // Listen for mouse movement
  $(window).mousemove(function(e){ 
    var d = {
      x: e.pageX - r - eyeposx - center.x,
      y: e.pageY - r - eyeposy - center.y
    };
    var distance = Math.sqrt(d.x*d.x + d.y*d.y);
    if (distance < distanceThreshold) {
      mouseX = e.pageX - eyeposx - r;
      mouseY = e.pageY - eyeposy - r;
    } else {
      mouseX = d.x / distance * distanceThreshold + center.x;
      mouseY = d.y / distance * distanceThreshold + center.y;
    }
  });
  
  // Update pupil location
  var pupil = $(pupil);
  var xp = center.x, yp = center.y;
  var loop = setInterval(function(){
    // change 1 to alter damping/momentum - higher is slower
    xp += (mouseX - xp) / 1;
    yp += (mouseY - yp) / 1;
    pupil.css({left:xp, top:yp});    
  }, 1);
};
//460 620
var eye = new DrawEye("eye4", "pupil4", 460, 130, 56);
var eye = new DrawEye("eye5", "pupil5", 620, 130, 56);

});

#dolan{
position:absolute;
top:0;
left:320px;
 -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src = "https://i.ibb.co/bNRmT0p/Dolan.png" id = "dolan">
<div id="dolaneye"></div>

Answer 2

使用此：

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

Answer 3

在position: fixed上使用#pupil。 https://jsfiddle.net/8m74okbe/

#pupil{
    position:fixed; 
    z-index:3;
    width:25px;
    height:25px;
    border-radius:100px;
   background-color:green;
}

div跟随鼠标但仍然被另一个div [眼睛效果]

3 个答案: