今天課程介紹的是移動的背景，順便講解下div+css動畫的原理。首先還是先介紹如何製作移動的背景效果。
html代碼比較簡單，我就全貼出來了，稍後介紹js的實現。
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> header { display: block; width: 660px; height: 380px; margin: auto; background: url(img/header.jpg) repeat 0 0; } </style></head><body> <header> </header></body></html>
頁面裡麵包含一個header標籤，設定了他的css效果，指定了css背景圖片和圖片的位移量。接下來我們要做的就是，通過修改背景位移量來實現背景移動的效果。這裡我們要使用到css的background-position屬性。大家可以到 http://www.w3school.com.cn/css/pr_background-position.asp，瞭解相關資訊。
我們看到上面css中定義了 background: url(img/header.jpg) repeat 0 0; 其中的0 0就是背景圖片的定位資訊，我們接下來就是通過修改第一個0，來實現背景圖片向左移動的動畫效果。如果想實現相上下移動的效果，需要修改第二個0。我們來看js代碼：
//擷取header對象var header = $('header');//設定背景初始值header.css('backgroundPosition', '0 0');//定義動畫函數var bgscroll = function () { //擷取當前x軸位置 var current = parseInt(header.css('backgroundPosition').split(' ')[0]), //設定新位置 newBgPos = (current - 1) + 'px 0px'; //將變數賦值給css的background-position屬性 header.css('backgroundPosition', newBgPos);};//定義迴圈setInterval(bgscroll, 75);
代碼很簡單，就是定義一個迴圈事件，每隔75毫秒去執行一次bgscroll，bgscroll每次擷取背景當前的x軸位置，執行-1操作，再把新值賦給css的background-position屬性。連貫的執行bgscroll函數的結果就是，背景圖片不斷的向左移動。如果想實現向右移動，需要把-1的操作修改成+1操作。
其實div+css動畫的原理很簡單（這裡講的不是利用css的transition來實現動畫），就是通過設定setInterval每隔幾毫秒執行一個動畫函數（有了setInterval就能實現自動的效果；當然你也可以不去設定setInterval而去設定某個html元素的click等事件，該事件裡面去執行動畫函數，這樣就實現了手工動畫的效果）。動畫函數要做的就是去修改html元素的css屬性值，有時候是修改background-position，更多的時候是修改left或者top屬性值。通過對他們進行增減的操作，就實現了html元素在頁面中上下左右位置的變化。left屬性值可以參考這個網站：http://www.w3school.com.cn/css/pr_pos_left.asp。
當然，光對html元素的left，top進行賦值有時候是不夠的，根據情況的需要可能還需要對他們的position屬性進行操作，以達到合理的布局效果。大家可以參照這裡學習position屬性：http://www.w3school.com.cn/css/css_positioning.asp。
把position，left等css屬性掌握透徹，返回頭再去看這個系列之前的文章，我想你一定能明白之前的動畫是如何?的了。
希望這篇文章對你理解jquery動畫效果的實現由一定的協助作用。demo：jquery.animate.animated-header.rar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
