遵循光标位置的 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 在第一次在矩形上移动时或在黑色和红色矩形之间移动时有效。

如果您使用"鼠标移动"，它就可以正常工作。

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>