頁面加載時的偏移div背景

我目前有一個背景偏移-500px x -200px的div，並與鼠標移動作出反應。我有它的方式設置，它只在鼠標移動後偏移。我已經嘗試了幾次讓.onload工作，所以它會盡快在頁面加載時抵消它，但我是新來的JavaScript和Jquery，我很難過。頁面加載時的偏移div背景

代碼移動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/

如果您移動鼠標在屏幕上，然後按刷新，你會看到什麼我的意思是。

任何幫助表示讚賞，在此先感謝！ :)

來源

2014-02-14 Mathew MacLean

當您移動鼠標，這是預期的背景位置。將鼠標移出屏幕並按刷新。它將背景貼到左上角。然後，如果你移動你的鼠標，你會看到如果跳到它應該是。 –

當你的頁面加載，你的背景位置是什麼，你已經將其設置爲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，鼠標移動上JQ會突然在-580px -256px設置（取決於您的鼠標所在地）。

你需要找到一種方式，JQ設置在頁面加載的背景下的位置，使之完全符合任何結果你的鼠標移動計算將給它一旦用戶開始四處移動他的鼠標指針。「 - 500」和

來源

2014-02-14 14:36:18 deadconversations

我遇到的問題是圖像從0,0而不是-500，-200開始。無論我在CSS改變它不希望在正確的位置開始。除此之外，其他一切都按預期工作。 –

你的CSS是什麼樣的？ .landing-content {background-position：-500px -200px; } – deadconversations

你指出我在正確的方向！「 - 500」和通過去除固定它的 - 從JQ「200」，然後添加保證金左：-500px; margin-top：-200px; –

通過去除固定它 - 從JQ「200」，然後添加

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

來源

2014-02-14 14:45:47

頁面加載時的偏移div背景

回答

相關問題