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

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

THE END

评论 17

  1. 🏅

    原来这么简单。。。我一直以为是FLASH的。。 :wink:

  2. 🏅🏅🏅

    :wink: 就想切你JJ

  3. 🏅🏅🏅

    哇 牧师还会写js代码?仰仗

  4. 🏆🏆

    一切都是浮云。。。浮云。。。 :smile: :neutral:

  5. 🏅🏅

    明白的 代码很简单咧

  6. 🏆🏅

    是我没理解还是什么情况,我没有看到那里有效果耶

    1. 🏆🏆🏅

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

      1. 🏆🏅

        哈,发现了,刚才看那个网站没仔细,盯着下面的图片狂看,呵呵

  7. 🏅

    JQ好强大

  8. 🏅🏅

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

      1. 🏅🏅

        两个死玻璃.. :smile:

发表评论

幸会!