html背景图片滑动,jQuery让背景图片滑动起来

惊云同学发来了一个地址，问我能不能向他那样，把背景图片动起来，我点开地址看了看还挺有趣的，就是头部一片浮云，在飘动，当然不是来回的飘。我看着有教程就答应帮他弄了。

本来很简单的事情，可是他那个主题头部实在太多东西了，在后台修改又没有代码高亮，一不小心把代码添加到他这题头部的的ie6hack里去了，就是那个[if lte IE 6]里，然后这边在谷歌浏览器下一直刷新没效果，到处找不到原因，最后开了一下页面源文件才发现，真实是悲剧。

好了，说正题。

惊云同学给我发的地址在这里：http://blueandhack.com/wordpress/1066.html

我弄出来的效果见惊云的博客这里：http://www.yaomeng.org/，希望他没去掉这个功能。

步骤开始：

1、找一块能连续的图，比如他们都是云，不同的云；

2、在加载jquery库(相对复杂的主题都会加载，只要确认一下就好)，比如：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

然后载入下面的js代码：

<script type="text/javascript" charset="utf-8">

var scrollSpeed = 70;

var step = 1;

var current = 0;

var imageWidth = 2247;

var headerWidth = 800;

var restartPosition = -(imageWidth - headerWidth);

function scrollBg(){

current -= step;

if (current == restartPosition){

current = 0;

}

$('#clouds').css("background-position",current+"px 0");

}

var init = setInterval("scrollBg()", scrollSpeed);

</script>

3、在css里添加下面的代码：

#clouds { background:url('images/bg.jpg') repeat-x scroll 0 0 transparent; width:100%; }

4、在主题的< body >(一般在header.php文件内)后面加< div id=”clouds” >，在 < / body >(一般在footer.php文件内)前面加< / div >(自己去掉空格)。

就这四步就可以搞定了，可以到惊云同学那去看效果，如果他没把它删除掉的话。