jQuery滾動div的背景圖像

我想簡單地將div中的背景圖像（比圖像小）向下移動，以便圖像在div的可見區域上漂移（圖像爲705高度，div爲215px高）。jQuery滾動div的背景圖像

我得到這個從其他職位，但它似乎並沒有工作:(

任何想法 - ？沒有錯誤，但沒有hapens

在HTML我有

<div id="banner"></div>

和CSS;

#banner { 
    background-image: url(/media/residential-services-705.jpg); 
    background-repeat: no-repeat; 
    height: 215px; 
    width: 940px; 
    background-position: left 0px; 
    margin: 0px; 
    padding: 0px; 
}

和JavaScript

$(document).ready(function() { 
    bouncebanner(); 
}); 

function bouncebanner(){ 
    $('#banner').stop().animate(
     {backgroundPosition:"(0 -490px)"}, 
     {duration:5000} 
    ); 
}

來源

2012-09-04 JJ Shaw

backgroundPosition: '0 -490'

不使用PX和支架，可能如果你正在尋找只進行動畫處理的其中一個軸（X或Y）導致該問題

來源

2012-09-04 13:19:49

，你應該針對特定軸如下：

// X Axis, use backgroundPositionX // 
function bouncebanner(){ 
    $('#banner').stop().animate({backgroundPositionX: -490}, 5000); 
} 

// Y Axis, use backgroundPositionY // 
function bouncebanner(){ 
    $('#banner').stop().animate({backgroundPositionY: -490}, 5000); 
}

另外，考慮增加一個起始位置爲背景圖片，因爲這將防止圖像在舊的瀏覽器跳如下：

background: url(/media/residential-services-705.jpg) no-repeat 0 0;

JSFiddle for X Axis

JSFiddle for Y Axis

我希望這有助於！

來源

2012-09-04 13:33:05 dSquared

jQuery滾動div的背景圖像

回答

相關問題