A simple full-screen image that is opened up or down to display the webpage Effect
Packaging: http://download.csdn.net/detail/sweetsuzyhyf/7602105
The source code shows the effect:
<! DOCTYPE html>
<Html>
<Head>
<Title> </title>
<Style>
Body {
Margin: 0;
Padding: 0;
}
. Wrap {
Overflow: hidden;
Position: fixed;
Z-index: 99999;
Width: 100%;
Top: 0;
Left: 0;
}
. Div {
Overflow: hidden;
Position: absolute;
Width: 100%;
}
. D {
Background: url(1.jpg) center no-repeat;
Height: 100%;
}
</Style>
</Head>
<Body>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<P> This is the website content. </p>
<Div class = "wrap">
<Div id = "d1" class = "div">
<Div class = "d"> </div>
</Div>
<Div id = "d2" class = "div">
<Div class = "d"> </div>
</Div>
</Div>
<Script src = "jquery-1.8.3.min.js"> </script>
<Script>
Var h = $ (window). height ();
Var h1 = h/2;
$ ('# D1, # d2'). height (h1 );
$ ('. Wrap,. D'). height (h );
Certificate ('{d2'}.css ('top', h1 );
$ ('# D2 .d'hangzhou.css ('margin-top',-h1 );
SetTimeout (function (){
$ ('# D1'). animate ({'top':-h/2}, 3000 );
$ ('# D2'). animate ({'top ': h}, 3000, function (){
$ ('. Wrapp'). remove ();
});
}, 2000); // open after a certain period of time, 1000 = 1 second
</Script>
</Body>
</Html>