Jquery遮罩插件，想罩哪就罩哪！一 前言 在項目開發時發現沒有一個用起來 爽一點的遮罩插件，看起來覺得不難 好吧那就利用空閑時間，自己折騰一個吧，也好把jquery再溫習一下，需要的功能如下　　1 可以全屏遮 用于提交數據時　　2 局部遮，用于重復提交，只遮提交按鈕，此功能當時在CSDN的登錄中看到過，當時覺得還不錯 3 遮罩上的提示文字可自己配置，因為操作的業務場景不一樣，提示的信息肯定也會不一樣 4 遮罩圖片可配置， 5 信息提示層大小可配置大致功能就如上幾點，然后就是折騰js了，蹭蹭蹭~~~~ 然后就出來了~ 先上效果 全局遮罩效果 局部遮罩 二 源碼相關需要了解的知識點大致如下 1 z-index屬性 2 position屬性 3 瀏覽器窗口與document 高寬的計算 4 jquery 插件格式 5 css 濾鏡效果 不多說了上代碼！為了減少引入的文件索性將css直接寫在js中了復制代碼/***************************Desc:提交操作時遮罩*Argument:type=0 全屏遮 1局部遮*Author:Zery-Zhang*Date:2014-09-18*Version:1.0.0**************************/; (function ($) { $.fn.jqLoading =function(option) { var defaultVal = { backgroudColor: "#ECECEC",//背景色 backgroundImage: "../image/loading.gif",//背景圖片 text: "玩命加載中....",//文字 width: 150,//寬度 height: 60,//高度 type:0 //0全部遮，1 局部遮 }; var opt = $.extend({}, defaultVal, option); if (opt.type == 0) { //全屏遮 openLayer(); } else { //局部遮(當前對象應為需要被遮擋的對象) openPartialLayer(this); } //銷毀對象 if (option === "destroy") { closeLayer(); } //設置背景層高 function height () { var scrollHeight, offsetHeight; // handle IE 6 if ($.browser.msie && $.browser.version < 7) { scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight); offsetHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight); if (scrollHeight < offsetHeight) { return $(window).height(); } else { return scrollHeight; } // handle "good" browsers } else if ($.browser.msie && $.browser.version == 8) { return $(document).height() - 4; } else { return $(document).height(); } }; //設置背景層寬 function width() { var scrollWidth, offsetWidth; // handle IE if ($.browser.msie) { scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth); offsetWidth = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth); if (scrollWidth < offsetWidth) { return $(window).width(); } else { return scrollWidth; } // handle "good" browsers } else { return $(document).width(); } }; /*==========全部遮罩=========*/ function openLayer() { //背景遮罩層 var layer = $("

");? ? ? ? ? ? layer.css({? ? ? ? ? ? ? ? zIndex:9998,? ? ? ? ? ? ? ? position: "absolute",? ? ? ? ? ? ? ? height: height() + "px",? ? ? ? ? ? ? ? width: width() + "px",? ? ? ? ? ? ? ? background: "black",? ? ? ? ? ? ? ? top: 0,? ? ? ? ? ? ? ? left: 0,? ? ? ? ? ? ? ? filter: "alpha(opacity=30)",? ? ? ? ? ? ? ? opacity: 0.3? ? ? ? ? ? ? ? ? ? ? ? ? });? ? ? ? ? ? ? ? ? ? ? //圖片及文字層? ? ? ? ? ? var content = $("

");? ? ? ? ? ? content.css({? ? ? ? ? ? ? ? textAlign: "left",? ? ? ? ? ? ? ? position:"absolute",? ? ? ? ? ? ? ? zIndex: 9999,? ? ? ? ? ? ? ? height: opt.height + "px",? ? ? ? ? ? ? ? width: opt.width + "px",? ? ? ? ? ? ? ? top: "50%",? ? ? ? ? ? ? ? left: "50%",? ? ? ? ? ? ? ? verticalAlign: "middle",? ? ? ? ? ? ? ? background: opt.backgroudColor,? ? ? ? ? ? ? ? borderRadius:"8px",? ? ? ? ? ? ? ? fontSize:"13px"? ? ? ? ? ? });? ? ? ? ? ? ? ? ? ? ? ? content.append("

" + opt.text + "");? ? ? ? ? ? $("body").append(layer).append(content);? ? ? ? ? ? var top = content.css("top").replace('px','');? ? ? ? ? ? var left = content.css("left").replace('px','');? ? ? ? ? ? content.css("top",(parseFloat(top)-opt.height/2)).css("left",(parseFloat(left)-opt.width/2));? ? ? ? ? ? ? ? ? ? ? return this;? ? ? ? }? ? ? ? //銷毀對象? ? ? ? function closeLayer() {? ? ? ? ? ? $("#layer,#content,#partialLayer").remove();? ? ? ? ? ? return this;? ? ? ? }? ? ? ? ? ? ? ? /*==========局部遮罩=========*/? ? ? ? function openPartialLayer(obj) {? ? ? ? ? ? ? ? ? ? var eheight = $(obj).css("height");//元素帶px的高寬度? ? ? ? ? ? var ewidth = $(obj).css("width");? ? ? ? ? ? var top = $(obj).offset().top; // 元素在文檔中位置 滾動條不影響? ? ? ? ? ? var left = $(obj).offset().left;? ? ? ? ? ? var layer = $("

");? ? ? ? ? ? layer.css({? ? ? ? ? ? ? ? style: 'z-index:9998',? ? ? ? ? ? ? ? position: "absolute",? ? ? ? ? ? ? ? height: eheight,? ? ? ? ? ? ? ? width: ewidth,? ? ? ? ? ? ? ? background: "black",? ? ? ? ? ? ? ? top: top,? ? ? ? ? ? ? ? left: left,? ? ? ? ? ? ? ? filter: "alpha(opacity=60)",? ? ? ? ? ? ? ? opacity: 0.6,? ? ? ? ? ? ? ? borderRadius:"3px",? ? ? ? ? ? ? ? dispaly: "block"? ? ? ? ? ? });? ? ? ? ? ? $("body").append(layer);? ? ? ? ? ? return this;? ? ? ? }? ? };? ? })(jQuery)復制代碼 插件用法如下復制代碼? ? ? ? $(function () {

? ? ? ? ? ? $("#btnOpen").on("click", function () {

? ? ? ? ? ? ? ? //全局

? ? ? ? ? ? ? ? //$(this).jqLoading();

? ? ? ? ? ? ? ? //局部

? ? ? ? ? ? ? ? $(this).jqLoading({ type: 1 });

? ? ? ? ? ? });

? ? ? ? ? ? $("#btnClose").on("click", function () {

? ? ? ? ? ? ? ? $(this).jqLoading("destroy");

? ? ? ? ? ? });

? ? ? ? })

? ? 復制代碼? 三? 總結　　以上代碼只為自己練習所用，如果碰巧能被人所用，那純屬巧合~我個人很享受，由構思到成品 這一過程，并一直努力將自己的一些想法，用代碼慢慢實現。

轉自：https://www.cnblogs.com/zery/p/4044674.html