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 >(自己去掉空格)。

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

作者: LMS

天行贱,君子自强自息。

标签

《jQuery让背景图片滑动起来》有17个想法

  1. 感谢HEBTV,感谢CCTV,感谢所有TV,当然主要还是感谢斜坡,帮哥哥实现这个效果,很不错。哥哥很喜欢

    1. @万戈 那个那个,不是我的主题,内容里面两个地址,第一个是头部有云在飘,第二个头部有云、太阳,还有飞机在飘,不过第二个飘的不明显。 😳

发表评论

电子邮件地址不会被公开。 必填项已用*标注