PHP前端开发

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

百变鹏仔 3个月前 (10-18) #H5教程
文章标签 自定义

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=&#39;ys-loading&#39;><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);