jquery - JQueryは、ページの中央にあるdiv内でマウスカーソルをたどります

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 を使用する場所を見ましたが、方法がわかりません。

ありがとうございました。