模仿google导航效果
示例下载点这里
google.js
测试index.html
原创文章，转载请注明出处：模仿google导航效果
google.js
+展开
-JavaScript
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.onmouseover=a.onmouseout=span.onmouseover=span.onmouseout=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，所以最先出现的显示在最右边
}
//导航动态
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.onmouseover=a.onmouseout=span.onmouseover=span.onmouseout=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
+展开
-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>编程设计网--google导航效果</title>
<script type="text/javascript" src="google.js"></script>
<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(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" class="msg"></a></li>
<li><a href="code.aspx" class="code"></a></li>
<li><a href="design.aspx" class="design"></a></li>
<li><a href="bblog.aspx" class="bblog"></a></li>
<li><a href="dblog.aspx" class="dblog"></a></li>
<li><a href="intro.aspx" class="intro"></a></li>
<li><a href="/" class="home"></a></li></ul>
<ul class="word">
<li><a href="message.aspx">访客留言</a></li>
<li><a href="code.aspx">代码下载</a></li>
<li><a href="design.aspx">设计作品</a></li>
<li><a href="bblog.aspx">B博文</a></li>
<li><a href="dblog.aspx">D博文</a></li>
<li><a href="intro.aspx">个人介绍</a></li>
<li><a href="/">首页</a></li></ul>
</div>
<script type="text/javascript">Showbo.InitGuider();//要手动调用此方法初始化导航的事件</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>编程设计网--google导航效果</title>
<script type="text/javascript" src="google.js"></script>
<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(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" class="msg"></a></li>
<li><a href="code.aspx" class="code"></a></li>
<li><a href="design.aspx" class="design"></a></li>
<li><a href="bblog.aspx" class="bblog"></a></li>
<li><a href="dblog.aspx" class="dblog"></a></li>
<li><a href="intro.aspx" class="intro"></a></li>
<li><a href="/" class="home"></a></li></ul>
<ul class="word">
<li><a href="message.aspx">访客留言</a></li>
<li><a href="code.aspx">代码下载</a></li>
<li><a href="design.aspx">设计作品</a></li>
<li><a href="bblog.aspx">B博文</a></li>
<li><a href="dblog.aspx">D博文</a></li>
<li><a href="intro.aspx">个人介绍</a></li>
<li><a href="/">首页</a></li></ul>
</div>
<script type="text/javascript">Showbo.InitGuider();//要手动调用此方法初始化导航的事件</script>
</body>
</html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：模仿google导航效果