今天課程介紹的是移動的背景，順便講解下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