在页面加载时偏移Div背景

Question

我目前有一个div，其背景偏移-500px x -200px，并且会随着鼠标的移动而变化。 我设置的方式只有在移动鼠标后才偏移。 我已经尝试过几次以使.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在页面加载中设置背景位置的方法，以使其与用户一旦开始移动光标后mousemove计算将给它的任何结果完全匹配。

Answer 2

通过从JQ删除“-500”和“-200”并添加

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