Package: http://download.csdn.net/detail/sweetsuzyhyf/7602105
On the source to see the effect:
<! DOCTYPE html>
<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 Center no-repeat;
height:100%;
}
</style>
<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);
$ (' #d2 '). CSS (' top ', H1);
$ (' #d2. d '). CSS (' margin-top ',-h1);
SetTimeout (function () {
$ (' #d1 '). Animate ({' Top ':-H/2}, 3000);
$ (' #d2 '). Animate ({' Top ': H}, +, function () {
$ ('. Wrap '). Remove ();
});
}, 2000);//Open after a certain time, 1000=1 seconds
</script>
</body>