google.js
var Showbo={author:'Showbo',des:'只是自己写的一个效果，和google的差很多，达不到google的那种完美效果，呵呵~~'}; //导航动态 Showbo.xPos=[0,-50,-100,-150,-200,-250,-300];//定义background-position的x位置,如果修改过图片的位置，需要修改这里，下面的y位置同理 Showbo.yPos=[-183,-145,-34,-72,1,-220,-109];//定义background-position的y位置 Showbo.timers=[];//计时器数组，注意不尽存储了计时器，还要当前的对象和它在Showbo.xPos中的当前索引及Showbo.yPos中的值 Showbo.speed=100;//速度 Showbo.chrbg=function(e){ var type=(e||event).type,o=this.span?this.span:this ,timer=Showbo.timers[parseInt(o.getAttribute('objIndex'),10)],reg=/over/; timer.dir=reg.test(type)?1:-1;//判断是鼠标移出还是移入，入则是升起，否则降落 if(!timer.t)//如果不存在计时器，则启动 timer.t=setInterval(function(){ timer.xIndex+=timer.dir; if(timer.xIndex<0||timer.xIndex>6){//如果到点位置或者超过数组最大上限则退出并清除计时器 clearInterval(timer.t);timer.t=null;return; } o.style.backgroundPosition=Showbo.xPos[timer.xIndex]+'px '+timer.yPos+'px';//设置backgroundPosition属性 },timer.dir==-1?Showbo.speed:Showbo.speed/3/*这里也是个关键，上升时速度是下降时的3倍*/); else if(timer.xIndex<0||timer.xIndex>6){//如果存在计时器，判断是否已经恢复原状或者达到数组上限 if(timer.dir=1)timer.xIndex=6;//如果是上升，则设置为最大 else timer.xIndex=0;//下降，设置为最小 clearInterval(timer.t);//清除计时器 timer.t=null; } } Showbo.initEvent=function (a,span,Index){ span.setAttribute('objIndex',Index);//设置自定义属性objIndex，获取timer中的 a.span=span;span.style.backgroundPosition='0px '+Showbo.yPos[Index]+'px'; //xIndex：是当前对象的x在Showbo.xPos的索引位置。默认值为0。因为默认就是处在点那个位置上。 //t：计时器 //yPos：导航图片所处的y位置，注意和xIndex存储的不一样，xIndex是索引，在计时器中通过增减xIndex实现上升下降的 //dir：记录是上升（1）还是下家（-1），默认初始化为上升1 Showbo.timers[Index]={xIndex:0,t:null,yPos:Showbo.yPos[Index],dir:1}; a.οnmοuseοver=a.οnmοuseοut=span.οnmοuseοver=span.οnmοuseοut=Showbo.chrbg;//添加事件 } Showbo.InitGuider=function(){ var ul=document.getElementById('dvGuider').getElementsByTagName('ul'); var t=document.getElementsByTagName('table')[0]; var a=ul[1].getElementsByTagName('a'),span=ul[0].getElementsByTagName('a'); for(var i=6;i>-1;i--)Showbo.initEvent(a[i],span[i],i);//注意这里，由于使用了浮动float:right，所以最先出现的显示在最右边 }
测试index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=gb2312" /> <title>Web开发网--google导航效果</title> <mce:script type="text/javascript" src="google.js" mce_src="google.js"></mce:script> <mce:style type="text/css"><!-- .top{height:150px;background:url(../images/topbg.gif) no-repeat;position:relative;} .top a{font-weight:bold;font-size:14px;} .top .picbg{position:absolute;bottom:20px;right:0px;} .top .picbg li{height:35px;} .top .picbg li a{display:block;margin:0px auto;height:35px;width:50px;background-image:url(http://www.w3dev.cn/images/guider.gif);} .top .picbg li a.home{background-position:0px -109px;} .top .picbg li a.intro{background-position:0px -220px;} .top .picbg li a.dblog{background-position:0px 1px;} .top .picbg li a.bblog{background-position:0px -72px;} .top .picbg li a.design{background-position:0px -34px;} .top .picbg li a.code{background-position:0px -145px;} .top .picbg li a.msg{background-position:0px -183px;} .top .word{position:absolute;bottom:0px;right:0px;line-height:20px;height:20px;vertical-align:middle;} .top .word li,.top li{width:78px;float:right;text-align:center;} --></mce:style><style type="text/css" mce_bogus="1">.top{height:150px;background:url(../images/topbg.gif) no-repeat;position:relative;} .top a{font-weight:bold;font-size:14px;} .top .picbg{position:absolute;bottom:20px;right:0px;} .top .picbg li{height:35px;} .top .picbg li a{display:block;margin:0px auto;height:35px;width:50px;background-image:url(guider.gif);} .top .picbg li a.home{background-position:0px -109px;} .top .picbg li a.intro{background-position:0px -220px;} .top .picbg li a.dblog{background-position:0px 1px;} .top .picbg li a.bblog{background-position:0px -72px;} .top .picbg li a.design{background-position:0px -34px;} .top .picbg li a.code{background-position:0px -145px;} .top .picbg li a.msg{background-position:0px -183px;} .top .word{position:absolute;bottom:0px;right:0px;line-height:20px;height:20px;vertical-align:middle;} .top .word li,.top li{width:78px;float:right;text-align:center;}</style> </head> <body> <div class="top" id="dvGuider"> <ul class="picbg"> <li><a href="message.aspx" mce_href="message.aspx" class="msg"></a></li> <li><a href="code.aspx" mce_href="code.aspx" class="code"></a></li> <li><a href="design.aspx" mce_href="design.aspx" class="design"></a></li> <li><a href="bblog.aspx" mce_href="bblog.aspx" class="bblog"></a></li> <li><a href="dblog.aspx" mce_href="dblog.aspx" class="dblog"></a></li> <li><a href="intro.aspx" mce_href="intro.aspx" class="intro"></a></li> <li><a href="/" mce_href="" class="home"></a></li></ul> <ul class="word"> <li><a href="message.aspx" mce_href="message.aspx">访客留言</a></li> <li><a href="code.aspx" mce_href="code.aspx">代码下载</a></li> <li><a href="design.aspx" mce_href="design.aspx">设计作品</a></li> <li><a href="bblog.aspx" mce_href="bblog.aspx">B博文</a></li> <li><a href="dblog.aspx" mce_href="dblog.aspx">D博文</a></li> <li><a href="intro.aspx" mce_href="intro.aspx">个人介绍</a></li> <li><a href="/" mce_href="">首页</a></li></ul> </div> <mce:script type="text/javascript"><!-- Showbo.InitGuider();//要手动调用此方法初始化导航的事件 // --></mce:script> </body> </html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
