Question

我已经按照一些精彩的代码在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，但我不知道如何。

谢谢。

Answer 1

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

要确保它保持在框内，您需要e.pageY和mouseX值的下限。您可以使用我在下面使用的mouseY或Math.max。

if

JSFiddle demo

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

JQuery在页面中心的div中跟随鼠标光标

2 个答案: