JQuery 在以页面为中心的 div 中跟随鼠标光标答案

【问题标题】：JQuery follow mouse curser within in a div centered on pageJQuery 在以页面为中心的 div 中跟随鼠标光标
【发布时间】：2013-09-02 22:21:41
【问题描述】：

我已经按照一些精彩的代码在http://jsfiddle.net/fhmkf/ 的 div 容器中让图像跟随鼠标光标。问题是，此方法仅适用于固定在绝对左/上位置的 div 容器，并且依赖于 e.pageX 和 e.pageY 坐标。

我需要将我的 div 放置在页面的中心或将其嵌套在一个 div 居中。

当我尝试继续使 div 居中时，它搞砸了鼠标光标和图像。对象只会在我将鼠标放在浏览器左上角时移动（因为它使用 e.pageX 和 e.pageY 坐标）

这是我的代码。 JavaScript

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
$(window).mousemove(function(e){
   mouseX = Math.min(e.pageX, limitX);
   mouseY = Math.min(e.pageY, limitY);
});

// 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);

我的 CSS

.centerdiv {
    width:150px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}

#follower{
  position : relative;
  background-color : yellow;
  width:15px;
  height:15px;
  border-radius:50px;
}


.container
{
    width:150px;
    height:150px;   
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    border:1px solid #000000;
}

我的 HTML

<div class="centerdiv">
<div class="container">
        <div id="follower"></div>
</div>
</div>

我创建了一个 FSFiddle 来向您展示发生了什么（请注意，当您将光标移到页面的左侧和顶部边缘时，您只能移动对象）。 http://jsfiddle.net/3964w/

我相信它与 e.PageX 和 e.PageY 有关，我在某个地方看到使用 e.ClientX 和 e.ClientY 但我不知道如何。

谢谢。

【问题讨论】：

我正在使用它，它工作得很好

标签： jquery cursor mousemove

【解决方案1】：

您可以使用 jQuery 的 .offset() 获取元素相对于文档的位置，然后分别从 e.pageX 和 e.pageY 值中减去其 left 和 top。

为确保它保持在框内，您需要对 mouseX 和 mouseY 值设置一个下限。您可以使用Math.max 或ifs，就像我在下面使用的一样。

$(window).mousemove(function(e){
  var offset = $('.container').offset();
   mouseX = Math.min(e.pageX - offset.left, limitX);
   mouseY = Math.min(e.pageY - offset.top, limitY);
   if (mouseX < 0) mouseX = 0;
   if (mouseY < 0) mouseY = 0;
});

JSFiddle demo

【讨论】：

如此接近！我看到对象消失在左侧，所以我删除了溢出：隐藏；从 .container 中，我看到该对象跟随光标到浏览器的左侧，而不是保留在 .container div 中。如果它可以保留在 .container div 中，它将完美运行 :) 感谢您的快速回复！
这就像神奇的奶酪术士。 :) 我唯一的要求，不确定它是否可能，我只是注意到在 .container 中停止时的光标点与#follower div 容器的左上角对齐。我希望成为顶部“中心”（而不是左上角），因为我的图像是向上箭头 :) 除此之外，这是完美的
当然，只需稍作修改。 JSFiddle

【解决方案2】：

非常好的例子，我需要这个。使用您的 centerdiv 触发效果以节省一些性能并使用 position() 和 margin() 来确定您的 div 的实际位置。

var mouseX = 0, mouseY = 0, limitX = 150-15, limitY = 150-15;
var stage = $(".centerdiv"), position = stage.position();

stage.mousemove(function(e){
   mouseX = Math.min(e.pageX - position['left'], limitX);
   mouseY = Math.min(e.pageY - position['top'], limitY);
});

// 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);

【讨论】：