loading效果(已测)

Submitted by 淡水河边 on 2007, September 4, 8:33 PM. 网页|前台相关

XML/HTML代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">      
  2. <html>      
  3. <head>      
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">      
  5. <title>load...</title>      
  6. <script type="text/javascript">      
  7. var t_id = setInterval(animate,20);       
  8. var pos = 0;       
  9. var dir = 2;       
  10. var len = 0;       
  11. function animate() {       
  12.         var elem = document.getElementById('progress');       
  13.         if(elem != null) {       
  14.                 if (pos == 0) len += dir;       
  15.                 if (len > 32 || pos > 79) pos += dir;       
  16.                 if (pos > 79) len -= dir;       
  17.                 if (pos > 79 && len == 0) pos = 0;       
  18.                 elem.style.left = pos;       
  19.                 elem.style.width = len;       
  20.         }       
  21. }       
  22. function remove_loading() {       
  23.         this.clearInterval(t_id);       
  24.         var targelem = document.getElementById('loader_container');       
  25.         targelem.style.display = 'none';       
  26.         targelem.style.visibility = 'hidden';       
  27. }       
  28. </script>      
  29. <style type="text/css">      
  30. <!--       
  31. #loader_container {       
  32.         text-align: center;       
  33.         position: absolute;       
  34.         top: 40%;       
  35.         width: 100%;       
  36.         left: 0;       
  37. }       
  38. #loader {       
  39.         font-family: Tahoma, Helvetica, sans;       
  40.         font-size: 11.5px;       
  41.         color: #000000;       
  42.         background-color: #FFFFFF;       
  43.         padding: 10px 0 16px 0;       
  44.         margin: 0 auto;       
  45.         display: block;       
  46.         width: 130px;       
  47.         border: 1px solid #5a667b;       
  48.         text-align: left;       
  49.         z-index: 2;       
  50. }       
  51. #progress {       
  52.         height: 5px;       
  53.         font-size: 1px;       
  54.         width: 1px;       
  55.         position: relative;       
  56.         top: 1px;       
  57.         left: 0px;       
  58.         background-color: #8894a8       
  59. }       
  60. #loader_bg {       
  61.         background-color: #e4e7eb;       
  62.         position: relative;       
  63.         top: 8px;       
  64.         left: 8px;       
  65.         height: 7px;       
  66.         width: 113px;       
  67.         font-size: 1px       
  68. }       
  69. -->      
  70. </style>      
  71. </head>      
  72.       
  73. <body onLoad="remove_loading();">      
  74. <div id="loader_container">      
  75. <div id="loader"><div align="center">加载中,请等稍……</div><div id="loader_bg"><div id="progress"> </div></div></div></div>      
  76. 这里放内容……       
  77. </body>      
  78. </html>  

Tags: loading

« 上一篇 | 下一篇 »

Trackbacks

点击获得Trackback地址,Encode: UTF-8 点击获得Trackback地址,Encode: GB2312 or GBK 点击获得Trackback地址,Encode: BIG5

发表评论

评论内容 (必填):