Chinaunix首页 | 论坛 | 博客

Janny' Homeailsa.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

cjjchong

  • 博客访问： 755361
  • 博文数量： 119
  • 博客积分： 137
  • 博客等级： 少校
  • 技术积分： 1582
  • 用 户 组： 普通用户
  • 注册时间： 2010-04-28 16:39
文章分类

全部博文（119）

文章存档

2017年（3）

2016年（7）

2014年（1）

2013年（8）

2012年（20）

2011年（27）

2010年（53）

我的朋友
最近访客
推荐博文
相关博文
原生javascript实现页面渐入

分类： Web开发

2017-05-16 10:50:53

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

点击(此处)折叠或打开

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
  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;

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

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


  47. function loadPage()
  48. {
  49.     timer = setTimeout('refreshpage()', 2000);
  50. }
  51.   //-->
  52.   </script>
  53.  </head>

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

  57. <div id="firstPage" style="width:100%;height:978px;background-color:red;">
  58.     <table style="width:100%;height:978px;background-color:red;">
  59.     <tr><td>
  60.     </td></tr>
  61.     </table>
  62. </div>
  63. <div id="popPage" style="width:100%;height:978px;border:0px;background-color:blue;" hidden>
  64.     <table style="width:100%;height:100%;background-color:blue;">
  65.     <tr><td>
  66.     </td></tr>
  67.     </table>
  68. </div>
  69. </body>
  70. </html>


阅读(1606) | 评论(0) | 转发(0) |
0

上一篇：给文件夹下的文件里面的函数添加debug信息，打印出所有的参数

下一篇：整理低版本ie兼容问题的解决方案

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6