模仿google导航效果

示例下载点这里

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>

本文来自https://wwwdev.cn/article/20130101/288.aspx

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

斯洛文尼亚旅游

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值