兼容:IE7以上版本及FF；（腾讯的WebQQ3.0好像也不兼容IE6,其实这样挺好的
）
上图片素材先：
背景图片: 
浮云图片: 
←——————————这里是有图片D~ 全选就能看见了（因为背景是白的，云也是白的嘛~）……
CSS代码：
*
{
margin : 0 ;
padding : 0 ;
}
body
{
background : url("Images/body_bg.jpg") repeat center 0 fixed ;
}
.cloud
{
background : url("Images/cloud1.png") ;
height : 250px ;
width : 580px ;
position : absolute ;
}
.hScroll
{
overflow : hidden ;
}
</style>
*
{
margin : 0 ;
padding : 0 ;
}
body
{
background : url("Images/body_bg.jpg") repeat center 0 fixed ;
}
.cloud
{
background : url("Images/cloud1.png") ;
height : 250px ;
width : 580px ;
position : absolute ;
}
.hScroll
{
overflow : hidden ;
}
</style>
body里的代码：
< div class ="cloud" id ="moveCloud" >
</ div >
</ body >
理解：页面加载的时候调用StarMove()函数；
Javascript代码：
var cloud = null ;
var left = 0 ;
document.documentElement.className = " hScroll " ;
function StartMove() {
cloud = document.getElementById( " moveCloud " );
setInterval(Move, 100 );
}
function Move() {
left += 1 ;
cloud.style.left = left + " px " ;
if (left >= (screen.width)) {
left = - 580 ;
}
}
< / script>
理解：document.documentElement.className = "hScroll"; 是调用css样式中的代码，目的是为了隐藏浏览器的滚动条(废话……上面不是说过了嘛^_^|| )
首先，我们要获取“浮云”层的id，所以用到了 cloud = document.getElementById("moveCloud"); cloud是一个全局变量，上面已经定义过了，所以在这里可以直接使用(老鸟勿喷，给新鸟看的).
然后再给他一个“计时器” setInterval(Move, 100); 调用100毫秒调用一次Move函数；
left += 1;等价于left=left+1; 配合上面的函数（每100毫秒调用一次嘛~）使用，然后再赋值给“浮云”层原来的坐标；所以写成了cloud.style.left = left + "px" ;
神马？你问我left是什么东东？他是css样式里的position的属性啊！不信你在DW里写个position冒号一下，看他出来不？
if (left >= (screen.width)) ； left = -580; 就是断判如果“浮云”移动(距离左边)的位置大于或者等于屏幕的宽度，我们就让他从头开始，把left的值设为-580；
为啥设-580?? 看CSS里面嘛，浮云的图片大小是580*250嘛，也就是他的长度是580px;所以把他设成-580是为了让它从右开始一点点显示，不然一上来就显示整张图片，多吓人啊~
废了半天话，不知道大家（和我一样菜的）看懂了没有，下面的是完整的代码，另存为.html文件试一下吧；图片自己下载，别忘了改路径！
完整代码:
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 背景图片移动 </ title >
< style type ="text/css" >
*
{
margin : 0 ;
padding : 0 ;
}
body
{
background : url("Images/body_bg.jpg") repeat center 0 fixed ;
}
.cloud
{
background : url("Images/cloud1.png") ;
height : 250px ;
width : 580px ;
position : absolute ;
}
.hScroll
{
overflow : hidden ;
}
</ style >
< script language ="javascript" type ="text/javascript" >
var cloud = null ;
var left = 0 ;
document.documentElement.className = " hScroll " ;
function StartMove() {
cloud = document.getElementById( " moveCloud " );
setInterval(Move, 100 );
}
function Move() {
left += 1 ;
cloud.style.left = left + " px " ;
if (left >= (screen.width)) {
left = - 580 ;
}
}
</ script >
</ head >
< body onload ="StartMove()" >
< div class ="cloud" id ="moveCloud" >
</ div >
</ body >
</ html >
