让背景图流动起来

要使图片移动起来，最常用的就是用Marquee字幕标签。它使用简单，代码也不复杂。但它的缺点是两次移动之间有一个空白过渡期，因此称为“有缝移动”。当然也可以用“跑马灯”让图片做无缝移动。但这些只适应普通图像，不能将“背景图”移动起来，除非采用复杂的定位技术。现在介绍一种用简单的JS脚本创造的背景图片移动效果，如上面的“布达拉宫”的背景：蓝天白云图。

背景图的显示与常规的图像显示是有区别的。它按图像的实际尺寸显示，不能通过width来调整它的显示大小。但作为背景，它可以在上面重叠另一张图（现在例子里是布达拉宫的gif图），或书写文字。另一个特点就是可以用CSS样式属性来改变它的显示位置和平铺特性。

从源代码的角度说，普通图用《img》标签显示，背景图常用《table》里的background属性显示。默然的状态：背景图在table的范围内满铺，位置的0点是table的左上角。要使背景图动起来就是利用这两个样式设置：利用它的满铺，并不断地改变它的起始位置。上面的实例就是每80毫秒让白云左移1px所产生的效果。

实例的源代码就在下面的代码框内。这里的重点是在table的标签内加了个属性设置：id = "bgmoveL" 这是指出要移动背景图就是这个table表的背景（background）图；在代码的最后加了一段简单的JS脚本。简单地说，标识id（identification）指出哪个背景图要移动，JS脚本是移动的动力。

JS实例的源代码：

要注意的是，id 标识名称（bgmoveL）在源代码里是唯一的，即在一个HTML文件里只能有一个。在JS文件里有相呼应的对象名称。（在JS里有好多个 bgmoveL）因此这个标识名不能随意更改。

在JS文件里，有两个需要关心的变量：mx和my。这是一对控制移动方向和步长的变量。mx设置X方向，正向为右；my设置y方向，正向为下（符合源代码里的坐标方向）。

mx=mx-1;的意思是x方向每一步向右移1px；

my=my ; 的意思是y方向不移动（相当于：my=my+0）；

如果 mx=mx+1;就是说明x方向每一步向左移1px。

数值 1 是步长。要移得快点就用 2 。

上两期的《音画边框》中有一些边条在移动，就是用了不同的mx和my设置的方向。

下面是又一个应用实例：飞鸟只是一个原地闪翅膀但不移动的 gif 图像，而蓝天白云在做相对（右）移动。这也是Marquee实现不了的。

在这篇博客里有四个背景图在移动：边框上两个，例子两个。它们用了不同的id标识，为区别，连移动方向也是不一样的。