吵吵   2011-08-20  阅读:2,868

早在前几天就把顶部菜单修改了一下,原始的几个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等来实现,具体不说了,仅供参考。

吵吵微信朋友圈,请付款实名加入:

吵吵 吵吵

13条回应:“wp顶部导航菜单云朵滑动特效js代码”

  1. 张海华说道:

    很美的云朵,只是我不会用这玩意!!

  2. 陈连龙说道:

    我不用wordpress了 呵呵

  3. 流氓兔说道:

    我没有用WP,所以了解下了!

  4. ccov说道:

    你太有才了。

  5. 瑞玺减肥丸说道:

    文章写得太好了,收藏一下

  6. 卢松松说道:

    不是吧,在火狐下没有移动啊

  7. 贺昌说道:

    太能折腾了,O(∩_∩)O哈哈~

  8. 问下博主,右侧的热门文章咋弄的?~~o(>_<)o ~~

    • 吵吵说道:

      我用的是postview_plus,该插件提供函数,调用浏览最多的几个篇日志。

  9. 刘俊说道:

    这个好东西

  10. 刚哥说道:

    火狐测试,没有效果,建议再做一些修改

发表评论

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