惊云同学发来了一个地址,问我能不能向他那样,把背景图片动起来,我点开地址看了看还挺有趣的,就是头部一片浮云,在飘动,当然不是来回的飘。我看着有教程就答应帮他弄了。
本来很简单的事情,可是他那个主题头部实在太多东西了,在后台修改又没有代码高亮,一不小心把代码添加到他这题头部的的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
涨姿势了
很实用。拿走。
原来这么简单。。。我一直以为是FLASH的。。
就想切你JJ
哇 牧师还会写js代码?仰仗
羡慕嫉妒恨吧?
一切都是浮云。。。浮云。。。
明白的 代码很简单咧
是我没理解还是什么情况,我没有看到那里有效果耶
那个那个,不是我的主题,内容里面两个地址,第一个是头部有云在飘,第二个头部有云、太阳,还有飞机在飘,不过第二个飘的不明显。
哈,发现了,刚才看那个网站没仔细,盯着下面的图片狂看,呵呵
看到就好,看到就好
JQ好强大
感谢HEBTV,感谢CCTV,感谢所有TV,当然主要还是感谢斜坡,帮哥哥实现这个效果,很不错。哥哥很喜欢
哥哥我只喜欢女的哦。
两个死玻璃..
域名难记又不留