跟随光标位置的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

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

Answer 2

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

如果您使用“ 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

主要问题是您使用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. 加回偏移量以定位圆