在頁面加載時偏移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;