div在mousemove（）上中心移動

Question

編輯：我現在有這個： http : //jsfiddle.net/cGZxv/115/如果我想擺脫容器div並僅使用“文檔”怎么辦？ 有沒有更清潔的方法可以做到這一點？

我一直在玩一些在網上找到的代碼，並且幾乎可以在需要的地方找到它。 我只是不知道如何完成最后一部分。 在此JSfiddle中：

http://jsfiddle.net/cGZxv/114/

  $(document).ready(function(){
  $('div.container').mousemove(function(e){
        var x = e.pageX - this.offsetLeft;
      if (x <= 400) {
          x2=x*0.2
          $('div.box').css({'right': x2}); 
      }
       var y = e.pageY - this.offsetTop;
      if (y <= 400) {
           y2=y*0.2
          $('div.box').css({'bottom': y2}); 
      }
  });
});

我想做的是將“測試箱”對齊到容器DIV的中心，然后在鼠標移動時實質上將其“環繞”中心。 如果您將鼠標移動成圓圈，則會得到所需的移動，但是框位於錯誤的位置。

提前致謝！

Answer 1

這是將其放置在主體中而不是容器中的JS。

$(document).ready(function(){
    $(window).mousemove(function(e){
        var x = e.pageX-window.innerWidth/2;
        if (x <= 400) {
            x2=x*0.2
            x3=x2+window.innerWidth/2
            $('div.box').css({'right': x3}); 
        }
        var y = e.pageY-window.innerHeight/2;
        if (y <= 400) {
            y2=y*0.2
            y3=y2+window.innerHeight/2
            $('div.box').css({'bottom': y3}); 
        }
    });
});

然后我更改了CSS，使其從中間開始：

.box { width: 50px; height: 50px; border: 1px #000 solid; position: absolute; margin:-25px 0 0 -25px;bottom:50%;right:50%;}

這是一個JSFiddle 。