zoukankan      html  css  js  c++  java
  • javascript 正在加载中,请稍后效果实现

    /*蒙版*/
    .loading-mask {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
        opacity: 0.3;
        filter: alpha(opacity = 30);
        z-index: 10000;
    }
    
    /*动态加载图片*/
    .loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(loading.gif) 50% 50% no-repeat;
    z-index: 10010;
    }
    //增加body遮罩
    function maskElement(maskLevel) {
        if (!maskLevel) {
            maskLevel = '0';
        }
    
        if ($(".mask-level-" + maskLevel).length == 0) {
            $("body").append('<div class="loading-mask mask-level-' + maskLevel + '"></div>');
        }
    }
    
    //取消body遮罩
    function unmaskElement(maskLevel) {
        if (!maskLevel) {
            maskLevel = '0';
        }
        $(".mask-level-" + maskLevel).remove();
    }
    
    function loadingShow(isMask) {
        if (isMask) {
            common.maskElement("0");
        }
        if ($(".loading").length == 0) {
            $("body").append('<div class="loading"></div>');
        }
    }
    
    function loadingHide() {
        unmaskElement("0");
        $(".loading").remove();
    }
  • 相关阅读:
    css之盒子模型
    meta小结
    css小结
    html标签及用法小结
    Css基础(2)
    Css基础(1)
    Html基础(2)
    Html基础(1)
    Markdown基础
    演示二
  • 原文地址:https://www.cnblogs.com/chenweichu/p/6149664.html
Copyright © 2011-2022 走看看