The effect is as follows:
Source code
| The code is as follows: |
Copy code |
<! 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>
<Title> split angle image at the top of the jQuery page </title>
<Script type = "text/javascript" src = "/ajaxjs/jquery-1.6.2.min.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Pageflip"). hover (function (){
$ ("# Pageflip img,. msg_block"). stop (). animate ({width: '307px ', height: '319px'}, 500 );
}, Function (){
$ ("# Pageflip img"). stop (). animate ({width: '50px ', height: '52px'}, 220 );
$ (". Msg_block"). stop (). animate ({width: '50px ', height: '50px'}, 200 );
});
});
</Script>
<Style type = "text/css">
* {Margin: 0; padding: 0; list-style-type: none ;}
A, img {border: 0 ;}
Body {font: 12px/180% Arial, Helvetica, sans-serif, "";}
Img {behavior: url (iepngfix. htc )}
/* Pageflip */
# Pageflip {right: 0px; float: right; position: relative; top: 0px}
# Pageflip img {z-index: 99; right: 0px; width: 50px; position: absolute; top: 0px; height: 52px; ms-interpolation-mode: bicubic}
# Pageflip. msg_block {right: 0px; background: url (/jscss/demoimg/201405/subscribe.png) no-repeat right top; overflow: hidden; width: 50px; position: absolute; top: 0px; height: 50px}
</Style>
</Head>
<Body>
<Div id = "pageflip">
<A href = "/" target = "_ blank"> </a>
<Div class = "msg_block"> </div>
</Div>
<Div style = "text-align: center; clear: both;">
</Div>
</Body>
</Html> |
The usage method is very simple. We can place css, js, and html respectively between the head and body. If you don't understand it, you can directly adjust the code.
