遮罩

2019-11-21 08:31:30来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

遮罩

一个简单的遮罩

 1 <style>
 2     #loading{
 3         display:none;
 4         width:100%; 
 5         margin:0 auto;
 6         position:fixed;
 7         left:0;
 8         top:0;
 9         bottom: 0;
10         z-index: 111;
11         background:#C7C7C7;
12         opacity: 0.8;
13     }
14     #loading img{
15         position:absolute;
16         top:50%;
17         left:50%;
18         transform: translate(-50%, -50%);
19     }
20 </style>
21 <body>
22     <div id='loading'>
23         <img src="http://api.liumeijingguan.com/Public/Imgs/5-121204193R5-50.gif" alt="上传中">
24     </div>
25     
26     <div onclick="xian()">点击显示</div>
27 </body>
28 </html>
29 <script src="jquery-1.8.1.min.js"></script>
30 <script>
31     function xian(){
32         $("#loading").show(); 
33         setTimeout(function(){
34             $("#loading").hide();
35         },3000)
36     }
37      
38 </script>

 


原文链接:https://www.cnblogs.com/xiaoyaolang/p/11904591.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:加载完后执行

下一篇:iframe子元素无法全屏