Code _javascript techniques for animating navigation effects with JavaScript

Who's using these navigation?
Google is a big company, the world has Google's footprints, the Korean Google animation effect is very good, the blue ideal forum has been dug over, but JS wrote too much, then write one yourself? Okay, just do it!
Principle
When I was young, I always like to watch cartoons, how do cartoons come true? Remember Mom said is a picture of a picture switch past (ah? How many paintings do the Gourd Brothers draw?-_-!), in fact, we are doing the same, with a picture, this picture has many small pictures, To display the animation trajectory. By the time to move the picture, the picture is not moving ah? (Don't know, express clearly not ... Chinese is very important AH!!)
Get ready
We need a picture, a brain, a smiling face (no laughing effect can not come out ...)!! Below is the picture I prepared (PS level limited ^_^) ...

Code

We see the picture above, imagine how beautiful it is moving ...

Css

Copy Code code as follows:

. 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

Copy Code code as follows:

<script type= "Text/javascript" >
<! [cdata[
function GNB (_7c) {
Initialize some of the parameters
this.iimgnum=7; Number of small pictures
this.iimgheight=75; Small picture height
this.ioverspeed=50; Time to switch when the mouse passes
this.ioutspeed=50; Time to switch when the mouse leaves
this.eventobj=_7c; Get Picture Object

This. Mouseoverflag=false;
this.imageindex=0;
if (this.eventobj==null) {return;}
This.eventobj.parentclass=this;this.eventassign ();
}

Gnb.prototype.eventassign=function () {//Registration Event
This.eventobj.onmouseover=this.menumouseover;
This.eventobj.onmouseout=this.menumouseout;
};

Gnb.prototype.menumouseover=function () {//mouse Pass
if (This.parentclass.mouseoverflag!=false) {return;}
This.parentclass.mouseoverflag=true;
This.parentClass.clearTimeOut ();
This.parentClass.menuMouseOverTimer ();
};

Gnb.prototype.menumouseout=function () {//mouse left
This.parentclass.mouseoverflag=false;
This.parentClass.clearTimeOut ();
This.parentClass.menuMouseOutTimer ();
};

Gnb.prototype.menumouseovertimer=function () {//increased by picture position
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 () {////is decremented by picture position
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 () {//Cancel timing
Cleartimeout (This.settimerid);
};
]]>
</script>

Xhtml

Copy Code code as follows:

<div class= "Gnb_btn_div" id= "gnb_btn_01" >
<a class= "gnb_btn_img" href= "#1" href= "#1" > Find Friends </a>
</div>

<script type= "Text/javascript" >
<! [cdata[
var gnb1=new gnb (document.getElementById ("gnb_btn_01"))//Instance single button, of course, can be multiple
]]>
</script>

Demo Address