早在前几天就把顶部菜单修改了一下，原始的几个css代码已经远远满足不了对美观的要求，思来想去就加上了一个云朵在底下滑动的特效，因为云朵比较符合我们这个网站的蓝色天空主题。白色云朵是一个png的图片，把底色已经过滤掉了的，只剩下云朵那一块，ps还花了我不少挤时间哎。好在这个javascript特效还是比较简单的。
闲来谈谈具体要怎么实现吧。对于顶部导航菜单来说一般都是li标签来分隔开来的。对于position是非absolute的元素，我们先要建立一个数组，记录下来这些分类的名称，然后就是将这个分类的postion改为absolute，最后就是写云朵div移动的函数了。好了代码如下：
function MoveCloud(step)
{
document.getElementById("menu_cloud").style.left=document.getElementById("menu_cloud").offsetLeft+step+"px";
quanMove=quanMove+step;
if(quanMove<=2 &&quanMove>=-2){
window.clearInterval(quanTime);
quanClock=false;
//var link=quanStopLi.getElementsByTagName('a');
//link[0].style.color="#03F";
}
}
function ChangeMenuBack(obj,check)
{
if(check==0)
{
if(quanClock==false)
{
if(obj.offsetLeft>document.getElementById("menu_cloud").offsetLeft && obj.offsetLeft<(document.getElementById("menu_cloud").offsetLeft+document.getElementById("menu_cloud").offsetWidth/2))
{
}
else
{
window.clearInterval(quanTime);
var AimLeft=obj.offsetLeft-(document.getElementById("menu_cloud").offsetWidth-obj.offsetWidth)/2;
var space=parseInt(document.getElementById("menu_cloud").offsetLeft-AimLeft);
if(space>0)
{
quanMove=space;
quanTime=setInterval("MoveCloud(-5)",1);
}
if(space<0)
{
quanMove=space;
quanTime=setInterval("MoveCloud(5)",1);
}
//云朵离开，颜色变回为白色。
var link=obj.getElementsByTagName('a');
link[0].style.color="#03F";
//alert(link[0].innerHTML);
link=quanStop.getElementsByTagName('a');
link[0].style.color="#FFF";
//alert(link[0].innerHTML);
quanStop=obj;
quanClock=true;
}
}
}
else{
}
}
//菜单云朵代码
function scall(){
var MenuCat=document.getElementById('top_menu_cat').getElementsByTagName('li');
var CatTop=new Array();
var CatLeft=new Array();
var i,adminHeight;
if(document.getElementById("wpadminbar")){
adminHeight=document.getElementById("wpadminbar").offsetHeight;
}
else
{
adminHeight=0;
}
for(i=0;i
当然，要使用以上代码，在li中你需要把onmousemove和onmouseover事件绑定到ChangeMenuBack函数。不过你也可以通过js代码addevent等来实现，具体不说了，仅供参考。
如无特别说明，本博客文章皆为原创。转载请说明，来自吵吵博客。
原文链接：http://chaochaoblog.com/archives/608
吵吵微信朋友圈，请付款实名加入：
很美的云朵，只是我不会用这玩意！！
我不用wordpress了 呵呵
难道返回去用z-blog了？
我没有用WP，所以了解下了！
你太有才了。
文章写得太好了，收藏一下
不是吧，在火狐下没有移动啊
真的假的，我自己测试过了会移动啊。
太能折腾了，O(∩_∩)O哈哈~
问下博主，右侧的热门文章咋弄的？~~o(>_<)o ~~
我用的是postview_plus，该插件提供函数，调用浏览最多的几个篇日志。
这个好东西
火狐测试，没有效果，建议再做一些修改