一种页面遮罩开窗方法的实现

最近在做书途网新手引导的时候，需要做在半遮罩层上开几个高亮的区域，左思右想，除了设置background-image的区域可以使用clip外，别的一时想不到更好的办法，于是就用填充的方式来做了。

/**
* 支持水平不重叠或者垂直不重叠的遮罩区域
**/
function disOverlay(elms, dir, area){
    var arr = [];
    var dir = (dir == 'x')?'left':'top';
    var area = area||{x: 0, y: 0, height: $('html').height(), width: $('html').width()};

    $(elms).each(function(index, item){
        
        if(!($(item).get(0).nodeType == 1)){
            item.offset = function(){
                return {top: this.y, left: this.x};
            }
            
            item.size = {height: item.height, width: item.width};
        }else{
            item = $(item);
        }
        
        
        if(arr.length == 0){
            arr.push($(item).get(0).nodeType?$(item):item);
            return;
        }

        var tmpArr = [];
        var len = arr.length;
        
        for(var i = 0; i < len; i++){
            if((arr[i]).offset()[dir] > (item).offset()[dir]){
                tmpArr = arr.slice(i, len - i);
                arr.splice(i, len - i, item);
                arr = arr.concat(tmpArr);
                return false;
            }
        }
        
        arr.push(item);
    });
    
    var overLay = $('<div></div>');
       
    var cls = 'overlay-item';
    
    if(dir == "left"){
        var len = arr.length;
        var tmpElm = $('<div class="' + cls + '"></div>');
        tmpElm.css({left: area.x, top: area.y, height: area.height, width: (arr[0]).offset().left - area.x});
        overLay.append(tmpElm);
        
        for(var i = 0; i < len; i++){
            
            var pos = (arr[i]).offset();
            var size = ((arr[i]).get && (arr[i]).get(0).nodeType === 1) ? getInnerSize($(arr[i])) : (arr[i]).size;
            
            //top
            tmpElm = $('<div class="' + cls + '"></div>');
            tmpElm.css({left: pos.left, top: area.y, height: pos.top, width: size.width});        
            overLay.append(tmpElm);
            
            //bottom
            tmpElm = $('<div class="' + cls + '"></div>');
            tmpElm.css({top: pos.top + size.height, left:  pos.left, height: area.height - pos.top - size.height, width: size.width});
            overLay.append(tmpElm);
            

            tmpElm = $('<div class="' + cls + '"></div>');

            tmpElm.css({top: area.y, left:  pos.left + size.width, height: area.height, width: ((arr[i+1])?(arr[i+1]).offset().left : (area.x + area.width)) - pos.left - size.width});
            overLay.append(tmpElm);
        }
        
    }else{
        var len = arr.length;
        var tmpElm = $('<div class="' + cls + '"></div>');
        tmpElm.css({left: area.x, top: area.y, width: area.width, height: (arr[0]).offset().top - area.y});
        overLay.append(tmpElm);
        
        for(var i = 0; i < len; i++){
            
            var pos = (arr[i]).offset();
            var size = ((arr[i]).get && (arr[i]).get(0).nodeType === 1) ? getInnerSize($(arr[i])) : (arr[i]).size;
            
            //left
            tmpElm = $('<div class="' + cls + '"></div>');
            tmpElm.css({left: area.x, top: pos.top, height: size.height, width: pos.left});        
            overLay.append(tmpElm);
            
            //right
            tmpElm = $('<div class="' + cls + '"></div>');
            tmpElm.css({top: pos.top, left:  pos.left + size.width, width: area.width - pos.left - size.width, height: size.height});
            overLay.append(tmpElm);
            
            //bottom
            tmpElm = $('<div class="' + cls + '"></div>');
            tmpElm.css({top: pos.top + size.height, left:  area.x, height: ((arr[i+1])?(arr[i+1]).offset().top : (area.y + area.height)) - pos.top - size.height, width: area.width});
            overLay.append(tmpElm);
        }
    }
    
    $('body').append(overLay);
    overLay.find('div').css({'background':"#000", zIndex: 7000, opacity: 0.7, position: "absolute"});
    
    return overLay;
};