html5自定义遮罩的实现代码分享

程序员文章站 2022-04-19 21:19:41

...

html5自定义遮罩的实现代码分享

ys_loading.css

.ys-loading{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index: 9999;
}
 
.ys-loading em{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    width:44px;
    height:44px;
    margin:auto;
    border-radius: 22px;
    opacity: 0.3;
    overflow: hidden;
}
 
.ys-loading em:before{
    content:"";
    display:block;
    width:46px;
    height:46px;
    background:url(../../images/common/ajax-loader.gif) no-repeat center center;
    background-size:contain;
    margin-top:-1px;
    margin-left:-1px;
}

ys_loading.js

(function($){
 
    var container = null;
 
    var html =  "<div class='ys-loading'><em></em></div>";
 
    function render(){
        container = $(html).appendTo("body");
    }
    var initialized = false;
    function init(){
        if(initialized){
            return;
        }
        initialized = true;
        render();
    }
 
    var LoadingWidget = {
        showLoading:function(){
            init();
            container.show();
        },
        hideLoading:function(){
            container.hide();
        }
    };
 
    window.LoadingWidget = LoadingWidget;
})(jQuery);

html5自定义遮罩的实现代码分享