Code for implementing the animation navigation effect using JavaScript

Who is using these navigation?
Google is a big company with footprints on Google all over the world. Google animation in South Korea has a very good effect. Someone has dug up the blue ideal forum. Unfortunately, there are too many JS files, write one by yourself? Okay, that's it!
Principle
When I was a child, I always liked watching cartoons. How did cartoons come about? I remember my mom said it was a painting and switched over (ah? How many paintings will the Hulu brother draw? -_-! In fact, we are doing the same thing now. Using an image, there are many small images in this image to show the animation track. Moving the image by time, isn't the picture moving? (I don't know. I'm clear... Chinese is very important !!)
Preparation
We need an image, a brain, and a smiling face (the smile effect will be lost ....)!! Below is the picture I prepared (PS level is limited ^_^ )...

Code

We can see the picture above. Imagine how beautiful it is to be moved...

CSSCopyCodeThe Code is 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 The Code is as follows: <SCRIPT type = "text/JavaScript">
// <! [CDATA [
Function GNB (_ 7C ){
// Initialize some parameters
This. iimgnum = 7; // number of small images
This. iimgheight = 75; // The height of the small image.
This. ioverspeed = 50; // time when the mouse passes
This. ioutspeed = 50; // time when the mouse leaves
This. eventobj = _ 7C; // retrieves an image object.

This. mouseoverflag = false;
This. imageindex = 0;
If (this. eventobj = NULL) {return ;}
This. eventobj. parentclass = this; this. eventassign ();
}

GNB. Prototype. eventassign = function () {// register an event
This. eventobj. onmouseover = This. menumouseover;
This. eventobj. onmouseout = This. menumouseout;
};

GNB. Prototype. menumouseover = function () {// move the mouse over
If (this. parentclass. mouseoverflag! = False) {return ;}
This. parentclass. mouseoverflag = true;
This. parentclass. cleartimeout ();
This. parentclass. menumouseovertimer ();
};

GNB. Prototype. menumouseout = function () {// move the mouse away
This. parentclass. mouseoverflag = false;
This. parentclass. cleartimeout ();
This. parentclass. menumouseouttimer ();
};

GNB. Prototype. menumouseovertimer = function () {// increment by Image 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 () {// decrease the position of the image
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 the timer
Cleartimeout (this. settimerid );
};
//]>
</SCRIPT>

XHTMLCopy codeThe Code is as follows:

<Div class = "gnb_btn_div" id = "gnb_btn_01">
<A class = "gnb_btn_img" href = "#1" href = "#1"> Find a friend </a>
</Div>

<SCRIPT type = "text/JavaScript">
// <! [CDATA [
VaR gnb1 = New GNB (document. getelementbyid ("gnb_btn_01"); // a single button for an instance, of course, multiple
//]>
</SCRIPT>

Demo address