提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

网页 简单 一个 示例 图片 显示 打开 效果
2023-06-13 09:15:37 时间

上源码看效果：

<!DOCTYPEhtml>
<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)centercenterno-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>
<divclass="wrap">
<divid="d1"class="div">
<divclass="d"></div>
</div>
<divid="d2"class="div">
<divclass="d"></div>
</div>
</div>
<scriptsrc="jquery-1.8.3.min.js"></script>
<script>
varh=$(window).height();
varh1=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>

相关文章