跟随光标位置的Javascript div框

Question

我正在尝试创建一个圆形导航按钮，以在光标位于某个框内时跟随鼠标移动。

var cer = document.getElementById('cerchio');
var pro = document.getElementById('prova');


pro.addEventListener("mouseover", function() {
var e = window.event;
var x = e.clientX;
var y = e.clientY;
cer.style.top = y + "px";
cer.style.left = x + "px";
cer.style.transition = "2s";
});

pro.addEventListener("mouseout", function() {
cer.style.top = "15px";
cer.style.left = "15px";
});

#prova {
width: 200px;
height: 200px;
border: 1px solid black;
}

#cerchio {
width: 90px;
height: 90px;
border: 1px solid red;
border-radius: 90px;
position: absolute;
left: 15px;
top: 15px;
}

#innercircle {
width: 120px;
height: 120px;
position: relative;
left: 40px;
top: 30px;
border: 1px solid red;
}

<div id="prova">
<div id="innercircle">
<div id="cerchio"></div>
</div>
</div>

所以它实际上跟随鼠标在黑色边框内的第一个位置，我希望它每次都更新光标位置并跟随它，我也不希望红色圆圈走出红色框，任何建议？请只使用javascript而不是jquery，谢谢！

Answer 1

主要问题是您使用了window.event 和错误的事件处理程序。 这是一个使用标准事件处理的解决方案：

var cer = document.getElementById('cerchio');
var pro = document.getElementById('prova');
var proR = pro.getBoundingClientRect();
var cirR = cer.getBoundingClientRect();
// radii
var rW = (cirR.right - cirR.left) / 2;
var rH = (cirR.bottom - cirR.top) / 2;
// page coords of center
var oX = (proR.right + proR.left) / 2;
var oY = (proR.bottom + proR.top) / 2;
var x, y;
// max movement
var max = 15;

function setPos(x, y) {
  cer.style.left = (x + oX - rW) + "px";
  cer.style.top = (y + oY - rH) + "px";
}

pro.addEventListener("mouseleave", function() {
  setPos(0, 0);
});

pro.addEventListener("mousemove", function(e) {
  // 0,0 is at center
  x = e.clientX - oX;
  y = e.clientY - oY;
  // limit to max
  if (x < -max) x = -max;
  if (x > max) x = max;
  if (y < -max) y = -max;
  if (y > max) y = max;
  // set circle position
  setPos(x, y);
});

setPos(0, 0);

#prova {
  display: inline-block;
  border: 1px solid black;
  padding: 40px;
}

#innercircle {
  width: 120px;
  height: 120px;
  border: 1px solid red;
}

#cerchio {
  width: 90px;
  height: 90px;
  border: 1px solid red;
  border-radius: 50%;
  transition: .5s;
  position: absolute;
  pointer-events: none;
}

#prova,
#innercircle,
#cerchio {
  box-sizing: border-box;
}

<div id="prova">
  <div id="innercircle">
    <div id="cerchio"></div>
  </div>
</div>

我也将计算改为

1. 确定 x,y 值，使区域中心为 (0, 0)
2. 将值限制在设定的边界内
3. 加回偏移以定位圆

Answer 2

您的主要问题是您使用的是“鼠标悬停”。此事件仅在鼠标进入元素时激活。这样，如果您第一次在矩形上移动，或者在黑色和红色矩形之间移动时，if 可以工作。

如果你使用'mousemove'，它就可以正常工作。

var cer = document.getElementById('cerchio');
var pro = document.getElementById('prova');


pro.addEventListener("mousemove", function() {
var e = window.event;
var x = e.clientX;
var y = e.clientY;
cer.style.top = y + "px";
cer.style.left = x + "px";
cer.style.transition = "2s";
});

pro.addEventListener("mouseout", function() {
cer.style.top = "15px";
cer.style.left = "15px";
});

#prova {
width: 200px;
height: 200px;
border: 1px solid black;
}

#cerchio {
width: 90px;
height: 90px;
border: 1px solid red;
border-radius: 90px;
position: absolute;
left: 15px;
top: 15px;
}

#innercircle {
width: 120px;
height: 120px;
position: relative;
left: 40px;
top: 30px;
border: 1px solid red;
}

<div id="prova">
<div id="innercircle">
<div id="cerchio"></div>
</div>
</div>

Answer 3

"mousemove" 是您想要跟踪的事件，因为您想要鼠标在元素内移动时的位置。您还应该将事件作为回调传递给事件处理程序

我还使用 getBoundingClientRect() 方法修复了定位。

var cer = document.getElementById('cerchio');
var pro = document.getElementById('prova');
var innerC = document.getElementById('innercircle');


innerC.addEventListener("mousemove", function(e) {
  var square = this.getBoundingClientRect();
  var squareX = square.x;
  var squareY = square.y;
  var squareWidth = square.width;
  var squareHeight = square.height;
  var mouseX = e.clientX;
  var mouseY= e.clientY;

  var x = e.clientX;
  var y = e.clientY;

  cer.style.top = (-squareY + mouseY - (squareHeight / 2 - 15)) + "px";
  cer.style.left = (-squareX + mouseX - (squareWidth / 2 - 15)) + "px";
  cer.style.transition = "2s";
});


innerC.addEventListener("mouseout", function() {
  cer.style.top = "15px";
  cer.style.left = "15px";
});

#prova {
width: 200px;
height: 200px;
border: 1px solid black;
}

#cerchio {
width: 90px;
height: 90px;
border: 1px solid red;
border-radius: 90px;
position: absolute;
z-index: -1;
left: 15px;
top: 15px;
}

#innercircle {
width: 120px;
height: 120px;
position: relative;
  z-index: 2;
left: 40px;
top: 30px;
border: 1px solid red;
}

<div id="prova">
<div id="innercircle">
<div id="cerchio"></div>