页面载入的动画效果js源代码

前端设计 更新于 热度(12614)

页面载入时等待页面的加载效果

效果一：

效果二：  

xml 代码
 
  1. <HTML><HEAD><TITLE>::诺豆网 —— nuodou.com _页面载入中......::</TITLE> 
  2. <META content="text/html; charset=gb2312" http-equiv=Content-Type> 
  3. <META NAME="author" CONTENT="haibor"> 
  4. <META NAME="keywords" CONTENT="haibor,nuodou"> 
  5. <STYLE type=text/css>TD { 

  6. FONT-FAMILY: 宋体; FONT-SIZE: 12px; LETTER-SPACING: 2px; LINE-HEIGHT: 150%; font-color: #000000 

  7. } 
  8. FORM { 

  9. FONT-FAMILY: 宋体; FONT-SIZE: 12px; LETTER-SPACING: 2px; LINE-HEIGHT: 150%; font-color: #000000 

  10. } 
  11. SELECT { 

  12. FONT-FAMILY: 宋体; FONT-SIZE: 12px; LETTER-SPACING: 2px; LINE-HEIGHT: 150%; font-color: #000000 

  13. } 
  14. INPUT { 

  15. FONT-FAMILY: 宋体; FONT-SIZE: 12px; LETTER-SPACING: 2px; LINE-HEIGHT: 150%; font-color: #000000 

  16. } 
  17. TEXTAREA { 

  18. FONT-FAMILY: 宋体; FONT-SIZE: 12px; LETTER-SPACING: 2px; LINE-HEIGHT: 150%; font-color: #000000 

  19. } 
  20. BODY { 

  21. FONT-FAMILY: 宋体; FONT-SIZE: 12px; LETTER-SPACING: 2px; LINE-HEIGHT: 150%; font-color: #000000 

  22. } 
  23. A:link { 

  24. COLOR: #666666; FONT-SIZE: 10.5pt; TEXT-DECORATION: none 

  25. } 
  26. A:visited { 

  27. COLOR: #666666; FONT-SIZE: 10.5pt; TEXT-DECORATION: none 

  28. } 
  29. A:hover { 

  30. COLOR: #666666; FONT-SIZE: 10.5pt; TEXT-DECORATION: none 

  31. } 
  32. A:active { 

  33. COLOR: #666666; FONT-SIZE: 10.5pt; TEXT-DECORATION: none 

  34. } 
  35. </STYLE> 
  36.  
  37. <SCRIPT language=JavaScript>  
  38. var url = 'http://www.haibor8.cn';  
  39. </SCRIPT> 
  40.  
  41. <META content="Microsoft FrontPage 4.0" name=GENERATOR> 
  42. <STYLE>.proccess { 

  43. BACKGROUND: #ffffff; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; HEIGHT: 8px; MARGIN: 3px; WIDTH: 8px 

  44. } 
  45. </STYLE> 
  46.  
  47. </HEAD> 
  48. <BODY onload="location.href = url;"  
  49. style="OVERFLOW: hidden; OVERFLOW-Y: hidden"> 
  50. <DIV align=center> 
  51. <TABLE align=center height="70%" valign="middle"> 
  52.   <TBODY> 
  53.   <TR> 

  54. <TD align=middle><p></p> 

  55.    

  56. <!--  Displaytext--> 

  57. :: chinaz.com :: is now loading...  

  58. <P></P> 

  59.   <FONT class=fontbig> 诺豆网 首页载入ing..... 

  60.  

  61.   <!--End Displaytext--> 

  62.   <P></P> 

  63.   <P></P> 

  64.   <P></P> 

  65.   <P></P> 

  66.   <DIV align=center>  

  67. <FORM method=post name=proccess> 

  68.   <SCRIPT language=javascript> 

  69. for(i=0;i<30;i++)document.write("<input class=proccess>") 
  70. </SCRIPT> 

  71. </FORM> 

  72.   </DIV> 

  73.   </font></TD> 

  74.   </TR></TBODY></TABLE> 

  75. <DIV align=center> 
  76. <SCRIPT language=JavaScript><!-- 
  77. var p=0,j=0; 
  78. var c=new Array("lightskyblue","white") 
  79. setInterval('proccess();',100) 
  80. function proccess(){ 

  81. document.forms.proccess.elements[p].style.background=c[j]; 

  82. p+=1; 

  83. if(p==30){p=0;j=1-j;}} 

  84. --></SCRIPT> 
  85. </DIV></DIV> 
  86. <DIV align=center> 
  87. <SCRIPT> 
  88. <!-- 
  89. if (document.layers)  
  90.   document.write('<Layer src="' + url + ' " VISIBILITY="hide"> </Layer>');  
  91.   else if (document.all || document.getElementById)  
  92.    document.write('<iframe src="' + url&n

    bsp;+ '" style="visibility: hidden;"></iframe>');  

  93. else location.href = url; 
  94. //--> 
  95. </SCRIPT> 
  96. </DIV></BODY></HTML>

声明：本站所有文章，如无特殊说明或标注，均为本站YangJunwei原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。本文链接https://yangjunwei.com/55.html

上一篇

下一篇

相关文章