Question

我只想在这篇文章的开头加上免责声明，说我是javascript / jquery的初学者，如果解释/示例进展缓慢，我将不胜感激：）

编辑帖子以缩小问题的范围，以使内容更清楚：我希望HTML元素仅在光标悬停于其后才跟随您的光标；一旦光标“离开”该元素，我希望该元素停止其跟随。

到目前为止，我已经找到了代码（来自w3schools：https://www.w3schools.com/jquery/event_hover.asp和StackOverflow上的另一篇文章：how to animate following the mouse in jquery）来实现“跟随游标”功能并使之仅在以下情况下发生：光标悬停在元素上：https://jsfiddle.net/rtwrtw8/og7ej0n8/

$(document).ready(function(){
  $("#follower").hover(function(){
    var mouseX = 0, mouseY = 0;
$(document).mousemove(function(e){
   mouseX = e.pageX;
   mouseY = e.pageY; 
});

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp) / 12;
    yp += (mouseY - yp) / 12;
    follower.css({left:xp, top:yp});
    
}, 30);
    }, function(){
    $(this).css("background-color", "pink");
  });
});

#follower{
  position : absolute;
  background-color : red;
  color : white;
  padding : 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="follower">Starts following once hovers</div>

但是，问题是，即使光标不再悬停在元素上，该框也将继续跟随光标（这已通过代码中指定的框变为粉红色来确认）。取而代之的是，该框应仅停留在光标最后一次悬停在其上方的位置。

如果任何人对如何实现此功能有任何建议或知道任何可行的示例，我将不胜感激！预先感谢！

Answer 1

一旦您开始听mouseMove，则需要在鼠标离开元素时停止使用off('mousemove')收听

尝试更改：

$(this).css("background-color", "pink");

收件人

$(this).off('mousemove').css("background-color", "pink");

您还应该使用clearInterval(intervalId)清除间隔

Answer 2

我会根据以下建议提出建议：

mouseover事件处理程序：设置insideObject = true
mouseout事件处理程序：设置insideObject = false
mousemove事件处理程序：如果（insideObject），则执行“跟随”操作（否则不执行任何操作）

首先，我认为不适合使用间隔计时器。

<style>
#myrect
{
 height:100px;
 width:100px;
 background-color:lightblue;
 position:absolute;
 left: 200;
 top: 200;
}
</style>

<div id=myrect> 
  XYZ
</div>

<script>
var following=false;
function gotIn()
{
 following = true;
 setDark();
}
function gotOut()
{
 following = false;
 setLight();
}
function moved(e)
{
 if (!following) return;
 var x = e.pageX;
 var y = e.pageY;
 var r = document.getElementById("myrect");
 r.style.left = x - 10;
 r.style.top = y - 10;
}
function setDark()
{
 document.getElementById("myrect").style.backgroundColor = "#00f";
}
function setLight()
{
 document.getElementById("myrect").style.backgroundColor = "lightblue";
}

document.getElementById("myrect").addEventListener('mousemove', moved, false);
document.getElementById("myrect").addEventListener('mouseover', gotIn, false);
document.getElementById("myrect").addEventListener('mouseout', gotOut, false);
</script>

仅当鼠标悬停在上方时，如何使HTML元素跟随光标移动？

2 个答案: