如何移動背景圖案圖案？

Question

我環顧四周，但我找不到答案，我也不知道該怎麼做。我在尋找的是一個JavaScript或jQuery腳本，它可以將背景圖像「移動」到div容器的右側，以便該模式具有「動畫效果」。

怎麼可能做到這一點？如果我沒有足夠詳細地解釋這個問題，我很抱歉。

Answer 1

您可以使用CSS background-position屬性來設置背景的位置。

這裏是一個live example，它將背景每一秒移動一個像素到右邊，當它達到100像素時重置。

HTML：

<div id="theDiv">This is the div</div> 

CSS：

#theDiv { 
    background-image: url(http://www.gravatar.com/avatar/7b13c109d50df67d5f7d0b1d901d7fb7?s=32&d=identicon&r=PG); 
    background-repeat: no-repeat; 
} 

的JavaScript：

jQuery(function($) { 

    var pos = 0; 
    move(); 

    function move() { 
    ++pos; 
    if (pos > 100) { 
     pos = 0; 
    } 
    $("#theDiv").css("background-position", pos + "px"); 
    setTimeout(move, 250); 
    } 

}); 

Answer 2

你不能在後臺位置使用jQuery.animate，因爲：

所有動畫屬性都應該動畫爲單個數值。

而background-position不是單個數值屬性。

因此，最好的辦法就是不要在這種情況下直接使用背景圖片。你可以重新做你的佈局，使圖像實際上是一個絕對定位<div>（你的背景圖像的大小）在另一個固定大小的<div>容器（position: relative; overflow: hidden;）。然後讓它「移動」 - 在絕對定位的<div>上動畫CSS left屬性。