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

点击(此处)折叠或打开

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.   <title> New Document </title>
  5.   <meta name="Generator" content="EditPlus">
  6.   <meta name="Author" content="">
  7.   <meta name="Keywords" content="">
  8.   <meta name="Description" content="">
  9. <style type="text/css">
  10. body {
  11.     margin: 0;
  12.     width:100%;
  13.     height:100%;
  14.     overflow: hidden;
  15. }    
  16. </style>
  17.   <script type="text/javascript">
  18.   <!--
  19. function refreshpage()
  20. {
  21.     var PopDiv = document.getElementById("popPage");
  22.     PopDiv.style.display = "block";
  23.     PopDiv.hidden= false;

  24.     var firstDiv = document.getElementById("firstPage");

  25.     clearInterval(timer);
  26.     timer = setInterval(function(){
  27.         var speed = 3; //<== change speed
  28.         
  29.         //console.log(firstDiv.style.height + " *** " + PopDiv.offsetTop + "*****" + firstDiv.clientHeight);
  30.         
  31.         if(PopDiv.offsetTop <= 1 )
  32.         {
  33.             clearInterval(timer);
  34.             firstDiv.hidden = true;
  35.             firstDiv.style.display = "none";
  36.         }
  37.         else if(PopDiv.offsetTop > 0){        
  38.             firstDiv.style.height = firstDiv.clientHeight - speed + "px";                
  39.         }
  40.         
  41.     },1); //<== change time interval
  42. }


  43. function loadPage()
  44. {
  45.     timer = setTimeout('refreshpage()', 2000);
  46. }
  47.   //-->
  48.   </script>
  49.  </head>

  50. <body onload="loadPage()">

  51. <div id="firstPage" style="width:100%;height:978px;background-color:red;">
  52.     <table style="width:100%;height:978px;background-color:red;">
  53.     <tr><td>
  54.     </td></tr>
  55.     </table>
  56. </div>
  57. <div id="popPage" style="width:100%;height:978px;border:0px;background-color:blue;" hidden>
  58.     <table style="width:100%;height:100%;background-color:blue;">
  59.     <tr><td>
  60.     </td></tr>
  61.     </table>
  62. </div>
  63. </body>
  64. </html>


09-03 21:39