jQuery和WebGL - 在鼠標移動時移動div

Question

那麼，什麼問題？我有一個「位置：絕對」屬性的div。現在 - 我想知道 - 每當鼠標移動時，我可以使用jQuery（或簡單的JavaScript）移動這個div嗎？這只是一個不斷增加的動作，只能在X軸上進行。因此 - 想象一下瀏覽器窗口的左側和右側。當 - 例如 - 鼠標光標位於左半部分時 - 此div始終緩慢向右移動;而且當光標越來越靠近左邊時 - div的速度會增加一點。我正在嘗試在Three.js引擎上學習WebGL。讓我告訴你一個例子：

看看這裏 - http://hadyk.pl/webgl/（可能不工作在IE）

看星星是移動的樣子，當你移動光標 - 我要實現與相同背景div。

感謝

編輯：好吧，我得到它的工作。看升級的鏈接。代碼：

腳本：

$('#background').css({backgroundPosition: "0px bottom"})

function moveRight() { 
       $('#background').stop().animate({right: "1500px"}, 
       {duration:80000}); 
} 
function moveLeft() { 
       $('#background').stop().animate({right: "-1500px"}, 
       {duration:80000}); 
} 
function onStop() { 
       $('#background').stop(); 
} 

HTML：

<div id="background"></div> 
<div id="left" onMouseOver="moveLeft()" onMouseOut="onStop()"></div> 
<div id="right" onMouseOver="moveRight()" onMouseOut="onStop()"></div> 

CSS：

#background { 
      background: #000 url(images/moon.png) no-repeat; 
      position:absolute; 
      bottom:0; 
      right:0; 
      width:411px; 
      height:404px; 
      z-index:-2; 
} 
#left { 
      position:absolute; 
      left:0; 
      bottom:0; 
      width:30%; 
      height:100%; 
      z-index:99 
} 
#right { 
      position:absolute; 
      right:0; 
      bottom:0; 
      width:30%; 
      height:100%; 
      z-index:99 
} 

Answer 1

我這裏得到一個錯誤：

function moveBackground() { 
    $('#background').css({'right':(parseInt($('#background').css('right')) + (e.pageX*0.001))+'px'}); 
window.setTimeout(moveBackground(), 50); 
} 

你在函數參數忘了e：

function moveBackground(e) { 
    $('#background').css({'right':(parseInt($('#background').css('right')) + (e.pageX*0.001))+'px'}); 
window.setTimeout(moveBackground(), 50); 
}