1

次の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+'%'});
        });
    });

マウスを id="test" の div の上に移動すると、背景が移動します。ここで、マウスをどこに移動しても背景が移動するように変更したいと思います。

これを行う方法はありますか？または、複数の div を使用して次のようなものを取得することは可能ですか:

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

あなたの助けに本当に感謝します！

4

3 に答える 3

2

次のように、イベントをドキュメントにバインドできます。

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

他の要素の他のすべての mousemove イベントはドキュメントにバブルアップすることに注意してください。したがって、ドキュメント内の要素に別のハンドラーがあり、その要素の上にマウスを移動すると、その要素のハンドラーが呼び出され、ドキュメント上のもの（およびハンドラーがある場合はその間の要素）。

また、特に古いブラウザーでは、ドキュメントの mousemove の追跡が遅くなる可能性があることにも注意してください。しばらくの間だけ追跡する必要がある場合は、作業が終わったらイベント ハンドラーのバインドを解除する必要があります。

于 2011-07-29T15:08:54.383 に答える
2

これを試して

$(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+'%'});
        });
    });
于 2011-07-29T15:09:06.123 に答える
0

あなたが探している効果は視差効果だと思いますが、わずかに変更されています。このようなもの、またはこのようなものです。

于 2011-07-29T15:14:56.053 に答える