Question

我目前有一个背景偏移-500px x -200px的div，并对鼠标移动作出反应。我设置它的方式，它只在鼠标移动后偏移。我已经尝试了几次让.onload工作，所以它会在加载的页面上尽快抵消它，但我是javascript和Jquery的新手，我很难过。

移动div背景的代码：

$(document).ready(function(e){  
    $('.landing-content').mousemove(function(e){
       var x = -(e.pageX + this.offsetLeft) / 80;
       var x2 = x * -1 - 500;
       var y = -(e.pageY + this.offsetTop) / 80;
       var y2 = y * -1 - 200;
       $(this).css('background-position', x2 + 'px ' + y2 + 'px');
    });    
});

实例： http://afrohorse.netau.net/

如果您在屏幕上移动鼠标，然后按刷新，您将看到我的意思。

感谢任何帮助，谢谢！：）

Answer 1

当您加载页面时，您的背景位置将是您在CSS中设置的位置（默认情况下为0,0，如果您设置了此值，则为-500px -200px）。

现在，当用户开始在页面上移动鼠标时，执行以下代码：

$('.landing-content').mousemove(function(e){
   var x = -(e.pageX + this.offsetLeft) / 80;
   var x2 = x * -1 - 500;
   var y = -(e.pageY + this.offsetTop) / 80;
   var y2 = y * -1 - 200;
   $(this).css('background-position', x2 + 'px ' + y2 + 'px');
});

看看你如何计算偏移量，你可以看到它在第一次初始化时跳转似乎很合乎逻辑。例如，如果您的CSS将偏移设置为-500px -200px，则在mousemove上jQ会突然将其设置为-580px -256px（取决于鼠标所在的位置）。

你需要找到一种让JQ在pageload上设置背景位置的方法，这样一旦用户开始移动光标，它就会完全匹配你的鼠标移动计算给出的结果。

Answer 2

通过从JQ中删除“ - 500”和“ - 200”然后添加

来修复它

margin-left: -500px;
margin-top: -200px;

页面加载时偏移Div背景

2 个答案: