JQuery follow mouse curser within in a div centered on page

问题

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.

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

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)

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

My 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;
}

My HTML

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

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/

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.

Thank you.

回答1:

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.

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

回答2:

Very nice example i needed this. Use your centerdiv to trigger the effect to save some performance and use position() and margin() to determine the real location of your 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);

来源：https://stackoverflow.com/questions/18581513/jquery-follow-mouse-curser-within-in-a-div-centered-on-page

标签

jquery

cursor

mousemove