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