javascript遮罩层编写

来源：互联网发布：金泫雅的舞蹈知乎编辑：程序博客网时间：2024/05/17 04:24

遮罩层JS代码

(function(a) {a.fn.mask = function(c, b) {a(this).each(function() {if (b !== undefined && b > 0) {var d = a(this);d.data("_mask_timeout", setTimeout(function() {a.maskElement(d, c)}, b))} else {a.maskElement(a(this), c)}})};a.fn.unmask = function() {a(this).each(function() {a.unmaskElement(a(this))})};a.fn.isMasked = function() {return this.hasClass("masked")};a.maskElement = function(d, c) {if (d.data("_mask_timeout") !== undefined) {clearTimeout(d.data("_mask_timeout"));d.removeData("_mask_timeout")}if (d.isMasked()) {a.unmaskElement(d)}if (d.css("position") == "static") {d.addClass("masked-relative")}d.addClass("masked");var e = a('<div class="loadmask"></div>');if (navigator.userAgent.toLowerCase().indexOf("msie") > -1) {e.height(d.height() + parseInt(d.css("padding-top"))+ parseInt(d.css("padding-bottom")));e.width(d.width() + parseInt(d.css("padding-left"))+ parseInt(d.css("padding-right")))}if (navigator.userAgent.toLowerCase().indexOf("msie 6") > -1) {d.find("select").addClass("masked-hidden")}d.append(e);if (c !== undefined) {var b = a('<div class="loadmask-msg" style="display:none;"></div>');b.append("<div>" + c + "</div>");d.append(b);b.css("top", Math.round(d.height()/ 2- (b.height() - parseInt(b.css("padding-top")) - parseInt(b.css("padding-bottom"))) / 2)+ "px");b.css("left", Math.round(d.width()/ 2- (b.width() - parseInt(b.css("padding-left")) - parseInt(b.css("padding-right"))) / 2)+ "px");b.show()}};a.unmaskElement = function(b) {if (b.data("_mask_timeout") !== undefined) {clearTimeout(b.data("_mask_timeout"));b.removeData("_mask_timeout")}b.find(".loadmask-msg,.loadmask").remove();b.removeClass("masked");b.removeClass("masked-relative");b.find("select").removeClass("masked-hidden")}})(jQuery);

遮罩层CSS

.loadmask {    z-index: 100;    position: absolute;    top:0;    left:0;    -moz-opacity: 0.5;    opacity: .50;    filter: alpha(opacity=50);    background-color: #CCC;    width: 100%;    height: 100%;    zoom: 1;}.loadmask-msg {    background: none repeat scroll 0 0 #FFFFFF;    border: 2px solid #80AAE0;    border-radius: 4px 4px 4px 4px;    display: none;    height: 32px;    left: 50%;    margin-left: -54px;    margin-top: -19px;    overflow: hidden;    padding: 2px;    position: absolute;    top: 50%;    width: 112px;    z-index: 101;}.loadmask-msg div {    background: #fbfbfb url('images/loading.gif') no-repeat 5px 9px;    color: #444444;    display: block;    font-size: 12px;    height: 30px;    line-height: 30px;    padding-left: 32px;}.masked {    overflow: hidden !important;}.masked-relative {    position: relative !important;}.masked-hidden {    visibility: hidden !important;}

把这两个文件导入页面然后调用 $("body").mask("正在加载....");表示在body里面加载遮罩层

0 0