一个html页面一张全屏的图,一个简单的全屏图片上下打开显示网页效果

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

打包下载地址：http://download.csdn.net/detail/sweetsuzyhyf/7602105

上源码看效果：

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%;

}

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

这是网站内容

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秒

http://www.dengb.com/webzh/827656.htmlwww.dengb.comtruehttp://www.dengb.com/webzh/827656.htmlTechArticle一个简单的全屏图片上下打开显示网页效果 打包下载地址：http://download.csdn.net/detail/sweetsuzyhyf/7602105 上源码看效果： !DOCTYPE html html head ti...