js实现动态导航

们看到上面的图片,想象下,它动起来是多么的优美啊…

css

复制内容到剪贴板

代码:

.Gnb_btn_div{

    width:90px;

    height:75px;

    overflow:hidden;

    display:block;

    position:absolute;

}  

.Gnb_btn_img{

    width:100%;

    height:525px;

    display:block;

    overflow:hidden;

    text-indent:-500px;

}

#gnb_btn_01 .Gnb_btn_img {

    background-image:url(http://www.wler.cn/blog/img/friend.gif)

}

javascript

复制内容到剪贴板

代码:

<script type="text/javascript">

// <![CDATA[

function GNB(_7c){

    //初始化一些参数

    this.iImgNum=7;            //小图片个数

    this.iImgHeight=75;        //小图片高度

    this.iOverSpeed=50;        //鼠标经过时候切换的时间

    this.iOutSpeed=50;        //鼠标离开时候切换的时间

    this.eventObj=_7c;        //取得图片对象  

    this.MouseOverFlag=false;

    this.imageIndex=0;

    if(this.eventObj==null){return;}

    this.eventObj.parentClass=this;this.eventAssign();

}  

GNB.prototype.eventAssign=function(){//注册事件

    this.eventObj.onmouseover=this.menuMouseOver;

    this.eventObj.onmouseout=this.menuMouseOut;

};  

GNB.prototype.menuMouseOver=function(){//鼠标经过

    if(this.parentClass.MouseOverFlag!=false){return;}

    this.parentClass.MouseOverFlag=true;

    this.parentClass.clearTimeOut();

    this.parentClass.menuMouseOverTimer();

};  

GNB.prototype.menuMouseOut=function(){//鼠标离开

    this.parentClass.MouseOverFlag=false;

    this.parentClass.clearTimeOut();

    this.parentClass.menuMouseOutTimer();

};  

GNB.prototype.menuMouseOverTimer=function(){//经过图片位置递增

    var _7d=this;

    if(this.imageIndex>=this.iImgNum){return;}

    this.eventObj.scrollTop=this.imageIndex*this.iImgHeight;

    this.imageIndex++;

    this.setTimerID=setTimeout(function(){_7d.menuMouseOverTimer();},this.iOverSpeed);

};  

GNB.prototype.menuMouseOutTimer=function(){////经过图片位置递减

    var _7e=this;if(this.imageIndex<0){return;}

    this.eventObj.scrollTop=this.imageIndex*this.iImgHeight;

    this.imageIndex--;

    this.setTimerID=setTimeout(function(){_7e.menuMouseOutTimer();},this.iOutSpeed);

};  

GNB.prototype.clearTimeOut=function(){//取消定时

    clearTimeout(this.setTimerID);

};

// ]]>

</script>

xhtml

<div class="Gnb_btn_div" id="gnb_btn_01">
<a class="Gnb_btn_img" href="#1" mce_href="#1">找朋友</a>
</div>

<script type="text/javascript">
// <![CDATA[
var GNB1=new GNB(document.getElementById("gnb_btn_01"));//实例单个按钮,当然也可以多个
// ]]>
</script>

补充：网页制作,js教程