Question

我有以下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){

我真的很感谢你的帮助！

Answer 1

您可以将事件绑定到文档，如下所示：

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

请注意，任何其他元素上的所有其他mousemove事件都会冒泡到文档中，因此如果文档中的某个元素上有另一个处理程序，并且将鼠标移到该元素上，它将同时调用该处理程序上的处理程序元素，以及文档中的元素（以及它们之间的任何元素，如果它们也有处理程序）。

您还应该知道，跟踪文档上的鼠标移动可能会很慢，尤其是在旧版浏览器上。如果您只需要跟踪它一段时间，那么在完成事件处理程序后应取消绑定它。

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

Answer 3

我认为您正在寻找的效果是视差效果，但略有修改。所以类似于this，或类似this。

整个页面或多个div与'.mousemove'

3 个答案: