原生javascript实现页面渐入

定时2秒后，新页面从底部渐入。

点击(此处)折叠或打开

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
body {
margin: 0;
width:100%;
height:100%;
overflow: hidden;
}
</style>
<script type="text/javascript">
<!--
function refreshpage()
{
var PopDiv = document.getElementById("popPage");
PopDiv.style.display = "block";
PopDiv.hidden= false;
var firstDiv = document.getElementById("firstPage");
clearInterval(timer);
timer = setInterval(function(){
var speed = 3; //<== change speed
//console.log(firstDiv.style.height + " *** " + PopDiv.offsetTop + "*****" + firstDiv.clientHeight);
if(PopDiv.offsetTop <= 1 )
{
clearInterval(timer);
firstDiv.hidden = true;
firstDiv.style.display = "none";
}
else if(PopDiv.offsetTop > 0){
firstDiv.style.height = firstDiv.clientHeight - speed + "px";
}
},1); //<== change time interval
}
function loadPage()
{
timer = setTimeout('refreshpage()', 2000);
}
//-->
</script>
</head>
<body onload="loadPage()">
<div id="firstPage" style="width:100%;height:978px;background-color:red;">
<table style="width:100%;height:978px;background-color:red;">
<tr><td>
</td></tr>
</table>
</div>
<div id="popPage" style="width:100%;height:978px;border:0px;background-color:blue;" hidden>
<table style="width:100%;height:100%;background-color:blue;">
<tr><td>
</td></tr>
</table>
</div>
</body>
</html>