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

时间：2021-05-25

上源码看效果：

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章