jQuery在窗口滾動動畫背景圖像的位置

我想實現使用jQuery的滾動效果。我有一個背景div設置爲100％瀏覽器窗口大小與溢出隱藏。這有一個大的背景圖像，大約是。 1500px x 2000px。jQuery在窗口滾動動畫背景圖像的位置

我想要的效果是，當用戶向下滾動頁面時，背景圖像以滾動距離的百分比移動，所以對於每200px向下滾動頁面，圖像將以相同方向移動10px。

任何人都可以指向正確的方向嗎？這甚至有可能嗎？：）提前謝謝了。

UPDATE

因爲由奧的斯@Capt的建議，嘗試變化我有，但我仍然在努力，我玩弄如下代碼：

$(window).scroll(function(){ 
    if($(this).scrollTop() > 200) { 
     $('#div').animate({'background-postion': '+=10px 0'}, 500); 
    } 
});

任何人都可以擺脫任何光線我做錯了什麼？

來源

2011-02-15 mtwallet

在這裏你去。背景設置爲10％滾動。您可以通過更改代碼中的10來更改背景滾動速率。

CSS

html, body{ 
    height:100%; 
    min-height:100%; 
    margin:0; 
    padding:0; 
} 
.bg{ 
    width:100%; 
    height:100%; 
    background: #fff url(..) no-repeat fixed 0 0; 
    overflow:auto; 
} 

<div class="bg"> 
    <span>..</span> 
</div>

的JavaScript

$('.bg').scroll(function() { 
    var x = $(this).scrollTop(); 
    $(this).css('background-position', '0% ' + parseInt(-x/10) + 'px'); 
});

檢查工作例如在http://jsfiddle.net/Vbtts/
點擊此鏈接全屏例如：http://jsfiddle.net/Vbtts/embedded/result/

來源

2011-02-21 09:36:23 Hussein

@Hussien嘗試了你的建議（非常感謝！），但尚未開始工作。我注意到jsfiddle你使用的jQuery UI我還沒有。這取決於哪個部分，是它的位置？ – mtwallet 2011-02-21 10:12:27

查看here查看用戶在頁面上滾動多遠的示例。請參閱$(this).scrollTop()？

而不是引用$（this），嘗試使用背景div。然後使用.scroll函數來確定移動背景的多少。

你的代碼看起來應該有點像這樣：

$("html").scroll(function{ 
    var move["bottom"] = $("bg_div").scrollTop(); 
    $("bg_div").animate({bottom: move}, 500); 
});

來源

2011-02-15 08:55:20

我不認爲你可以使用+ =或 - =當你有兩個部分的CSS。也有一些是你可以做的，這是一個有點棘手，但它的工作原理：

$(window).scroll(function(){ 
    if($(this).scrollTop() > 200) { 
     var bgpos = $("#div").css("background-position"); 
     var bgposInt = 0; 
     if(bgpos.indexOf("px")!=-1) { 
      bgpos = bgpos.substr(bgpos.indexOf("px")+3); 
      bgposInt = parseInt(bgpos.substr(0, bgpos.indexOf("px"))); 
     } 
     bgposInt += 10; 
     $("#div").animate({"background-position": "0 "+bgposInt+"px"}, 500); 
    } 
});

此代碼從div的背景，地位僅第二號位（首位），將其轉換爲int，並將它增加10點。然後它將動畫分割到新的位置。

來源

2011-02-17 11:56:32 Cokegod

感謝您的回覆。我已經嘗試過這段代碼的不同版本，但是我不敢讓它正常工作。 – mtwallet 2011-02-18 15:42:06

這可能做到這一點：

$(window).scroll(function(){ 
    $('#div').css("background-position",parseInt($(this).scrollTop()*0.05)); 
})

來源

2011-02-19 12:08:30 Gareth

這爲我工作：

在JS：

$(window).scroll(function() { 
    var x = $(this).scrollTop(); 
    $('#main').css('background-position', '100% ' + parseInt(-x/1) + 'px' + ', 0% ' + parseInt(-x/2) + 'px, center top'); 
});

在CSS：

#main { 
background: url(../img/img1.png) center top no-repeat, url(../img/img2.png) center top no-repeat, url(../img/img3.png); 
background-repeat: no-repeat, no-repeat, repeat-x; 
background-position: right top, left top, center top;

哪裏#main是其背景圖片我想提出的股利。無需有身高：100％的HTML，身體。

這是多個背景圖像的變體。

來源

2012-03-14 12:59:20 stormwild

如果你不想用額外的背景DIV被滋擾，這裏是我的代碼，我從幾個例子包裹起來：

$(window).scroll(function() { 
    setBackgroundPosition(); 
}) 
$(window).resize(function() { 
    setBackgroundPosition(); 
}); 
function setBackgroundPosition(){ 
    $("body").css('background-position', "-" + (1920 - $(window).width())/2 + "px " + -(Math.max(document.body.scrollTop, document.documentElement.scrollTop)/4) + "px"); 
}

需要跨瀏覽器問題的Math.max。用您的背景圖像的寬度替換'1920'

body{ 
    background-image:url(images/background.jpg); 
    background-position:center top; 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
}

來源

2013-04-30 21:35:25 breez

jQuery在窗口滾動動畫背景圖像的位置

回答

相關問題