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

最新推荐文章于 2022-10-13 19:55:04 发布

原创最新推荐文章于 2022-10-13 19:55:04 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种在网页上实现半遮罩层并高亮显示特定区域的方法。通过使用JavaScript，作者创建了一个函数，该函数能够根据指定的元素和方向生成遮罩层，并保留这些元素的可见性。这种方法适用于需要视觉指引的新手引导场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

[img]http://dl.iteye.com/upload/attachment/0076/7395/180c5f6d-e3ef-31fd-99f6-9bce0ab6f125.jpg[/img]

[img]http://dl.iteye.com/upload/attachment/0076/7395/180c5f6d-e3ef-31fd-99f6-9bce0ab6f125.jpg[/img]


/**
* 支持水平不重叠或者垂直不重叠的遮罩区域
**/
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;
};