zoukankan      html  css  js  c++  java
  • 页面加载中效果实现

    1、加载的loading.css

    @charset "UTF-8";
    /* LOGIN CSS */
    
    .background { 
    	display: block; 
    	 100%; 
    	height: 100%; 
    	opacity: 0.4; 
    	filter: alpha(opacity=40); 
    	background:#f1f1f1;
    	position: fixed; 
    	top: 0; 
    	left: 0; 
    	z-index: 10000; 
    } 
    .progressBar { 
    	background: white url(../img/loading.gif) no-repeat 10px 10px; 
    } 
    .progressBar { 
    	display: block; 
    	 148px; 
    	height: 28px; 
    	position: fixed; 
    	top: 50%; 
    	left: 50%; 
    	margin-left: -74px; 
    	margin-top: -14px; 
    	padding: 10px 10px 10px 50px; 
    	text-align: left; 
    	line-height: 27px; 
    	font-weight: bold; 
    	position: absolute; 
    	z-index: 10001; 
    } 

       注意:background部分的position: fixed;否则,只能在当前区域内遮盖

    2、页面引用

    <!-- shade div start -->
    	<div id="background" class="background" style="display: none; "></div> 
    	<div id="progressBar" class="progressBar" style="display: none; ">Loading...</div> 
    <!-- shade div end -->

    3、遮罩的显示与隐藏

    //遮罩效果显示
    $("#background,#progressBar").show();
    //遮罩效果隐藏
    $("#background,#progressBar").hide();
    

      

    人生苦短,我用python
  • 相关阅读:
    poj 2362 Square
    poj 1011 Sticks
    hust 1062 Divisibility
    hdu 4115 Eliminate the Conflict
    Android
    android stdio 快捷键
    Android Lint的使用
    Android studio导出配置
    fragment显示 Binary XML file line #12: Error inflating class fragment 错误
    markdown 字体颜色
  • 原文地址:https://www.cnblogs.com/pigga/p/10098305.html
Copyright © 2011-2022 走看看