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

我已经按照一些精彩的代码在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

我创建了一个FSFiddle来向您展示发生了什么（请注意，当光标位于页面的左上角时，您只能移动对象）。 http://jsfiddle.net/3964w/

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

谢谢。

Answer 1

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

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

 $(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演示

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