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自定义遮罩的实现代码分享的详细内容。