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>