如何移動背景圖案圖案？

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

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

2012-01-29 Alex

您可以使用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); 
    } 

});

來源

2012-01-29 12:50:57

這工作正常，但是，當背景移動時，它曾經是一個很大的空白。是否有可能做到這一點，當完成滾動的背景的一部分時，它會返回到左邊？ – Alex 2012-01-29 13:08:38

'background-repeat：repeat-x;' – Sim 2012-01-29 13:09:58

@Alex：請參閱Sim的評論; [信息]（http://www.w3.org/TR/CSS2/colors.html#propdef-background-repeat）。 – 2012-01-29 13:17:01

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

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

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

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

來源

2012-01-29 12:55:26 Sim

如何移動背景圖案圖案？

回答

相關問題