jQuery и WebGL - перемещение div по движению мыши - PullRequest
Новая
       1

jQuery и WebGL - перемещение div по движению мыши

0 голосов
/ 03 ноября 2011

Итак, в чем проблема?У меня есть div с "position: absolute" свойство.Теперь - мне было интересно - можно ли перемещать этот div с помощью jQuery (или простого javascript), каждый раз, когда движется мышь?И речь идет о постоянном и возрастающем движении, только по оси X.Итак - представьте левую и правую часть окна браузера.Когда - например, курсор мыши находится в левой половине - этот div медленно все время движется вправо;а также когда курсор становится все ближе и ближе к левому краю - скорость деления увеличивается немного.Я пытаюсь изучить WebGL на движке Three.js.Позвольте мне показать вам пример:

посмотрите здесь - 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
}

1 Ответ

0 голосов
/ 03 ноября 2011

Я получаю ошибку здесь: 

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