jquery動畫 -- 7.會移動的背景，講解div+css動畫原理

　　今天課程介紹的是移動的背景，順便講解下div+css動畫的原理。首先還是先介紹如何制作移動的背景效果。

　　html代碼比較簡單，我就全貼出來了，稍後介紹js的實作。

　　我們看到上面css中定義了 background: url(img/header.jpg) repeat 0 0; 其中的0 0就是背景圖檔的定位資訊，我們接下來就是通過修改第一個0，來實作背景圖檔向左移動的動畫效果。如果想實作相上下移動的效果，需要修改第二個0。我們來看js代碼：

　　代碼很簡單，就是定義一個循環事件，每隔75毫秒去執行一次bgscroll，bgscroll每次擷取背景目前的x軸位置，執行-1操作，再把新值賦給css的background-position屬性。連貫的執行bgscroll函數的結果就是，背景圖檔不斷的向左移動。如果想實作向右移動，需要把-1的操作修改成+1操作。

　　當然，光對html元素的left，top進行指派有時候是不夠的，根據情況的需要可能還需要對他們的position屬性進行操作，以達到合理的布局效果。大家可以參照這裡學習position屬性：http://www.w3school.com.cn/css/css_positioning.asp。

 　　把position，left等css屬性掌握透徹，傳回頭再去看這個系列之前的文章，我想你一定能明白之前的動畫是如何實作的了。

<a href="http://www.vancl.com/?source=kbh1983&amp;sourcesuninfo=ad-3090-1-52-0-1" target="_blank"></a>