html5 自定义遮罩

简介：

ys_loading.css

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

.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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

(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);

附件：http://down.51cto.com/data/2368264

 本文转自 antlove 51CTO博客，原文链接:http://blog.51cto.com/antlove/1862623