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

jQuery和WebGL - 在鼠标移动时移动div

1 个答案: