Home > Developer > JavaScript
Source code:
Copy codeThe Code is as follows:
<! 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">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Google homepage animation </title>
<Style type = "text/css">
. Animate {
Height: 156px;
Width: 97px;
Background: url (images/gumby11-gumby.jpg) no-repeat;
Background-position:-15581px center;
}
</Style>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> </script>
<Script type = "text/javascript">
$ (Function (){
Var offset =-15678;
$ ('# Start'). click (function (){
Var timer = setInterval (function (){
Offset + = 98;
Certificate ('{animate'}.css ({
'Background-position': offset + 'px Center'
});
If (offset> 0 ){
ClearInterval (timer );
}
}, 50 );
$ (This). hide ();
});
});
</Script>
</Head>
<Body>
<Div id = "animate" class = "animate"> </div>
<A id = "start" href = "javascript: void (0)"> get started! </A>
</Body>
</Html>
In fact, this animation is not difficult. It is difficult to make it on that image. I don't know how it was made !!!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
