一个简单的全屏图片上下打开显示网页效果示例

上源码看效果：
<！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 center no-repeat;height: 100%;}</style></head><body><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</p><p>这是网站内容</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 }, 3000, function （） {$（".wrap"）.remove（）;}）;}, 2000）;//一定时间后打开，1000=1秒</script></body></html>