JQuery在一个以页面为中心的div中跟随鼠标光标 [英] JQuery follow mouse curser within in a div centered on page

问题描述

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

I have followed some wonderful code to have an image follow the mouse cursor within a div container at http://jsfiddle.net/fhmkf/. The problem is, this method only works for div containers fixed in absolute left/top position and relies on e.pageX and e.pageY coordinates.

我需要将div定位在页面中心或将其嵌套在div居中。

I need to position my div in the center of the page or nest it in a div centered.

当我尝试继续以div为中心时，将鼠标光标和图像拧紧。对象只会随着鼠标在浏览器的左上角移动（因为它使用e.pageX和e.pageY坐标）

When I try to attempt to proceed centering the div, its screws up the mouse cursor and image. The object will only move with I have the mouse up in the upper left hand corner of the browser (because its using e.pageX and e.pageY coordinates)

这里是我的代码。
JavaScript

Here is my code. 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/

I created an FSFiddle to show you what happens (notice you can only move the object when you have the cursor to the left and top edge of the page). http://jsfiddle.net/3964w/

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

I believe its related to e.PageX and e.PageY and I saw somewhere to use e.ClientX and e.ClientY but I don't know how.

谢谢您。

推荐答案

您可以使用jQuery的 .offset（）相对于文档的元素，然后从 e中减去 left 和 top pageX 和 e.pageY 值。

You can use jQuery's .offset() to get the position of the element relative to the document, then subtract its left and top from the e.pageX and e.pageY values, respectively.

为了确保它在框内，你需要在 mouseX 和 mouseY 值。您可以使用 Math.max 或 if ，就像我在下面使用。

To ensure it stays within the box, you need a lower bound on the mouseX and mouseY values. You could use Math.max or the ifs like I used below.

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

这篇关于JQuery在一个以页面为中心的div中跟随鼠标光标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！