Code to use javascript to achieve animated navigation effects_javascript skills

Who is using these navigations
Google is a big company, and it has its footprints all over the world. The Korean Google animation effect is very good. Someone has already poached it in the Blue Ideal Forum. It’s a pity that I have written too much js. Then I Write one? Okay, let’s do it!
Principle
When I was a child, I always liked watching cartoons. How are cartoons implemented? I remember my mother said that I switched from painting to painting (ah? Then How many paintings do you need to draw for one Calabash Brothers? -_-! ), in fact, we are doing the same thing now, using a picture with many small pictures in it to show the animation trajectory. Move the picture according to time, then Doesn’t the picture move? (I don’t know, have you expressed it clearly... Chinese language is very important!!)
Preparation
We need a picture, a brain, and a smiling face (the effect of not smiling is Can’t come out...)!! Below are the pictures I prepared (PS level is limited^_^)...

Code

We see the above picture, imagine, How beautiful it moves...

css

Copy code The 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:

xhtml




Copy code

The code is as follows:

Find friends

/ var GNB1=new GNB(document.getElementById("gnb_btn_01"));//Instance a single button, of course there can be multiple // ]]> < ;/script>

Demo address