jquery动画 -- 7.会移动的背景，讲解div+css动画原理
今天课程介绍的是移动的背景，顺便讲解下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
