Вся страница или несколько разделов с '.mousemove'

У меня есть следующий фрагмент jQuery

$(document).ready(function(){
        var vH=$('#background').height();
        var vW=$('#background').width();
        var vT=$('#background').offset().top;
        var vL=$('#background').offset().left;
        $('#test').mousemove(function(e){
            var ypos=e.pageY-vT;
            var xpos=e.pageX-vL;
            var y=Math.round(ypos/vW*1500);
            var x=Math.round(xpos/vH*200);
            $('#test').val(x+' , '+y);
            $('#background').css({backgroundPosition: x+'% '+y+'%'});
        });
    });

Он перемещает фон, когда я навожу мышь на div с id="test". Теперь я хочу изменить его так, чтобы фон двигался независимо от того, куда вы перемещаете мышь.

Так есть ли способ сделать это? Или можно использовать несколько div, чтобы получить что-то вроде:

$('#test', '#test2').mousemove(function(e){

Я очень ценю вашу помощь!


html jquery mousemove
person Thomas van Broekhoven    schedule 29.07.2011    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Попробуй это

$(document).ready(function(){
        var vH=$('#background').height();
        var vW=$('#background').width();
        var vT=$('#background').offset().top;
        var vL=$('#background').offset().left;
        $(document).mousemove(function(e){
            var ypos=e.pageY-vT;
            var xpos=e.pageX-vL;
            var y=Math.round(ypos/vW*1500);
            var x=Math.round(xpos/vH*200);
            $('#test').val(x+' , '+y);
            $('#background').css({backgroundPosition: x+'% '+y+'%'});
        });
    });
person ShankarSangoli    schedule 29.07.2011
comment
Большое спасибо. Глупо, что я не мог этого представить ;-) - person Thomas van Broekhoven; 29.07.2011

arrow_upward
2
arrow_downward

Вы можете привязать событие к документу следующим образом:

$(document).mousemove(function(e){ ...

Просто имейте в виду, что все другие события mousemove для любого другого элемента всплывают в документе, поэтому, если у вас есть другой обработчик для какого-либо элемента в документе, и вы наводите мышь на этот элемент, он вызовет как обработчик этого элемента, так и тот, что в документе (и любые промежуточные элементы, если у них тоже есть обработчики).

Вы также должны знать, что отслеживание перемещения мыши в документе может быть медленным, особенно в старых браузерах. Если вам нужно отслеживать его только некоторое время, вы должны отменить привязку обработчика событий, когда закончите с ним.

person Paul    schedule 29.07.2011

arrow_upward
0
arrow_downward

Я думаю, что эффект, который вы ищете, - это эффект параллакса, но немного измененный. Что-то вроде этого или типа это.

person ayyp    schedule 29.07.2011