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

上源码看效果：

<!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>

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