<!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" xml:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name='keywords' content='' />
<meta name='description' content='' />
<title>用javascript来实现动画导航</title>
<style>
<!--
/*我直接把CSS写这了*/
div.header{width:1000px;height:200px;margin:0 auto;position:relative}
.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.ddlucky.com/image/home/friend.gif)}
#gnb_btn_01 {bottom:12px;left:160px; }
-->
</style>
</head>
<body>
<div class="header">
<div class="Gnb_btn_div" id="gnb_btn_01"><a class="Gnb_btn_img" href="#1">找朋友</a></div>
</div>
<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);
};
var GNB1=new GNB(document.getElementById("gnb_btn_01"));
//]]>
</script>
</body>
</html>
浙公网安备 33010602011771号