Jquery遮罩插件，想罩哪就罩哪！

時間 2019-11-09

標籤 jquery 插件欄目 JQuery 简体版

原文原文鏈接

一前言

在項目開發時發現沒有一個用起來爽一點的遮罩插件，看起來以爲不難好吧那就利用空閒時間，本身折騰一個吧，也好把jquery再溫習一下，javascript

須要的功能以下css

　　1 能夠全屏遮用於提交數據時java

　　2 局部遮，用於重複提交，只遮提交按鈕，此功能當時在CSDN的登陸中看到過，當時以爲還不錯jquery

3 遮罩上的提示文字可本身配置，由於操做的業務場景不同，提示的信息確定也會不同瀏覽器

4 遮罩圖片可配置，app

5 信息提示層大小可配置this

大體功能就如上幾點，而後就是折騰js了，蹭蹭蹭~~~~ 而後就出來了~ 先上效果 spa

全局遮罩效果 插件

局部遮罩3d

二源碼相關

須要瞭解的知識點大體以下

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 = $("<div id='layer'></div>");
            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 = $("<div id='content'></div>");
            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("<img style='vertical-align:middle;margin:"+(opt.height/4)+"px; 0 0 5px;margin-right:5px;' src='" + opt.backgroundImage + "' /><span style='text-align:center; vertical-align:middle;'>" + opt.text + "</span>");
            $("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 = $("<div id='partialLayer'></div>");
            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)

插件用法以下

    <input  type="button" id="btnOpen" value="打開" />
    <input type="button" id="btnClose" value="關閉" />

    <script type="text/javascript">
        $(function () {
            $("#btnOpen").on("click", function () {
                //全局
                //$(this).jqLoading();

                //局部
                $(this).jqLoading({ type: 1 });
             
            });


            $("#btnClose").on("click", function () {
                $(this).jqLoading("destroy");
              
            });
        })
    
    </script>