zoukankan      html  css  js  c++  java

  • 进度条加载后显示页面

    思路：加入很多图片，以延迟加载时间，实现加载完后显示图片。定义一个外层DIV，覆盖住图片，在内层DIV中引入加载时显示的图片，让内层DIV居中在页面上，利用setInterval定时器设置3秒后将外层DIV隐藏，从而显示图片，达到加载完后显示页面的效果。

     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <title></title>  
    5.     <style type="text/css">  
    6.         .loading{  
    7.              100%;  
    8.             height: 100%;  
    9.             position: fixed;  
    10.             top: 0;  
    11.             left: 0;  
    12.             z-index: 100;  
    13.             background: #fff;  
    14.         }  
    15.         .loading .pic{  
    16.              64px;  
    17.             height: 64px;  
    18.               
    19.             background: url(loading.gif);  
    20.             position: absolute;  
    21.             top: 0;  
    22.             left: 0;  
    23.             bottom: 0;  
    24.             right: 0;  
    25.             margin: auto;  
    26.         }  
    27.     </style>  
    28. </head>  
    29. <body>  
    30.   
    31.   
    32.   
    33. <img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">  
    34. <img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">  
    35. <img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">  
    36. <img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">  
    37. <img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">  
    38.   
    39. <script type="text/javascript" src="jquery-1.8.2.min.js"></script>  
    40. <script type="text/javascript">  
    41.     $(function(){  
    42.   
    43.         var loading='<div class="loading"><div class="pic"></div></div>';  
    44.         $('body').append(loading);  
    45.         setInterval(function(){  
    46.             $('.loading').fadeOut();  
    47.         },3000)  
    48.     })  
    49. </script>  
    50. </body>  
    51. </html>  

    知识点：

    DIV居中：
     
    1. position: absolute;  
    2. top: 0;  
    3. left: 0;  
    4. bottom: 0;  
    5. right: 0;  
    6. margin: auto;  

    2.

    思路：利用状态事件监听的方法：onreadystatechange，判断redayState，实现加载完后显示页面的效果

    [html] view plain copy
     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <title></title>  
    5.     <style type="text/css">  
    6.         .loading{  
    7.              100%;  
    8.             height: 100%;  
    9.             position: fixed;  
    10.             top: 0;  
    11.             left: 0;  
    12.             z-index: 100;  
    13.             background: #fff;  
    14.         }  
    15.         .loading .pic{  
    16.              64px;  
    17.             height: 64px;  
    18.               
    19.             background: url(loading.gif);  
    20.             position: absolute;  
    21.             top: 0;  
    22.             left: 0;  
    23.             bottom: 0;  
    24.             right: 0;  
    25.             margin: auto;  
    26.         }  
    27.     </style>  
    28. </head>  
    29. <body>  
    30.   
    31. <div class="loading">  
    32.     <div class="pic"></div>  
    33. </div>  
    34.   
    35.   
    36. <img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">  
    37. <img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">  
    38. <img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">  
    39. <img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">  
    40. <img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">  
    41.   
    42. <script type="text/javascript" src="jquery-1.8.2.min.js"></script>  
    43. <script type="text/javascript">  
    44.     document.onreadystatechange=function(){  
    45.         if(document.redayState=='complete'){  
    46.             $('loading').fadeOut();  
    47.         }  
    48.     }  
    49. </script>  
    50. </body>  
    51. </html>  

    知识点：

    通过onreadystatechange事件监听readyState的状态，我们只需要关心最后一个状态'complete'，当达到complete状态，说明加载成功。

    3.

    思路：利用CSS3实现动画效果，达到加载 完后显示页面。同样采用onreadystatechange事件监听的方法，不同的是实现了一种动态效果。

      利用i标签，加入CSS样式，实现5个间隔开的矩形。利用animation每隔1.2s循环一次，无限循环。每个i标签，延时0.1s在Y方向上伸长缩短，达到动画效果。
     
    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.     <title></title>  
    5.     <style type="text/css">  
    6.         .loading{  
    7.              100%;  
    8.             height: 100%;  
    9.             position: fixed;  
    10.             top: 0;  
    11.             left: 0;  
    12.             z-index: 100;  
    13.             background: #fff;  
    14.         }  
    15.         .loading .pic{  
    16.              50px;  
    17.             height: 50px;  
    18.             position: absolute;  
    19.             top: 0;  
    20.             left: 0;  
    21.             bottom: 0;  
    22.             right: 0;  
    23.             margin: auto;  
    24.         }  
    25.         .loading .pic i{  
    26.             display: block;  
    27.             float: left;  
    28.              6px;  
    29.             height: 50px;  
    30.             background: #399;  
    31.             margin: 0 2px;  
    32.             -webkit-transform: scaleY(0.4);  
    33.                 -ms-transform: scaleY(0.4);  
    34.                     transform: scaleY(0.4);  
    35.             -webkit-animation: load 1.2s infinite;  
    36.                     animation: load 1.2s infinite;  
    37.         }  
    38.         .loading .pic i:nth-child(2){  
    39.             -webkit-animation-delay: 0.1s;  
    40.                     animation-delay: 0.1s;  
    41.         }  
    42.         .loading .pic i:nth-child(3){  
    43.             -webkit-animation-delay: 0.2s;  
    44.                     animation-delay: 0.2s;  
    45.         }  
    46.         .loading .pic i:nth-child(4){  
    47.             -webkit-animation-delay: 0.3s;  
    48.                     animation-delay: 0.3s;  
    49.         }  
    50.         .loading .pic i:nth-child(5){  
    51.             -webkit-animation-delay: 0.4s;  
    52.                     animation-delay: 0.4s;  
    53.         }  
    54.         @-webkit-keyframes load{  
    55.             0%,40%,100%{  
    56.                 -webkit-transform: scaleY(0.4);  
    57.                         transform: scaleY(0.4);  
    58.             }  
    59.             20%{  
    60.                 -webkit-transform: scaleY(1);  
    61.                         transform: scaleY(1);  
    62.             }  
    63.         }  
    64.         @keyframes load{  
    65.             0%,40%,100%{  
    66.                 -webkit-transform: scaleY(0.4);  
    67.                         transform: scaleY(0.4);  
    68.             }  
    69.             20%{  
    70.                 -webkit-transform: scaleY(1);  
    71.                         transform: scaleY(1);  
    72.             }  
    73.         }  
    74.     </style>  
    75. </head>  
    76. <body>  
    77.   
    78. <div class="loading">  
    79.     <div class="pic">  
    80.         <i></i>  
    81.         <i></i>  
    82.         <i></i>  
    83.         <i></i>  
    84.         <i></i>  
    85.     </div>  
    86. </div>  
    87. <img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">  
    88. <img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">  
    89. <img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">  
    90. <img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">  
    91. <img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">  
    92. <script type="text/javascript" src="jquery-1.8.2.min.js"></script>  
    93. <script type="text/javascript">  
    94.     document.onreadystatechange=function(){  
    95.         if(document.redayState=='complete'){  
    96.             $('loading').fadeOut();  
    97.         }  
    98.     }  
    99. </script>  
    100. </body>  
    101. </html>  
    知识点：

    1.scale:伸长缩短。scaleX:x方向。scaleY:y方向。

    2.infinite:无限循环

    3.animate-delay:0.1s  延时0.1s

    4.@keyframes 动画名称{

    0%{

    }

    100%{

    }

    }

     
     
  • 相关阅读:
    poj 1262 地板覆盖问题
    混合图 (Standard IO)
    matrix
    麻将 (Standard IO)
    C#多线程编程之：异步事件调用
    使用线程池与专用线程
    C#多线程编程之：Timer（定时器）使用示例
    C#多线程编程之：异步方法调用
    WCF 快速入门
    c#实现每隔一段时间执行代码（多线程）
  • 原文地址：https://www.cnblogs.com/chaofei/p/7688912.html
Copyright © 2011-2022 走看看