﻿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 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，所以最先出现的显示在最右边
}
