css3 引导遮罩层 | 易学教程

https://blog.csdn.net/tangtang5963/article/details/51276560

要实现遮罩层和部分区域高亮显示，这里的思路是应用了元素的border属性，将元素的四个border值设置的非常大，铺满整个屏幕，这样就实现了页面遮罩部分镂空的效果。

让遮罩层的的宽度和高度等于目标元素的宽度和高度，剩下的遮罩效果就是合理设置遮罩层四个border的值的大小，使遮罩层铺满整个屏幕。

我们想把引导效果做的更加好看一下，制作成椭圆的效果，需要用到css3的border-radius:50%;并且圈圈内带有模糊效果，如何实现？就需要用到css3的box-shadow: inset 0 0 5px 2px rgba(0,0,0,.75);这样一个属性。我们需要把当前元素作为外层限制标签，里面重新生成一个大尺寸伪元素，实现内层的高亮椭圆内边缘模糊效果，最终实现的效果如下如图所示：

由于我们的目标元素的宽度和高度是不固定的，我们可以设置各种元素的高亮效果，就不用在手动设置border的宽度来配合目标元素的宽度和高度，有没有一个通用的方法？这就需要用JS来实现啦，js的实现思路如下：

1 获取目标元素的宽度和高度，targetWidth,targetHeight

2 获取页面的宽度和高度,pageWidth,pageHeight

3 获取目标元素在页面中的位置,offsetTop,offsetLeft（目标元素距离页面顶部的距离，距离页面左边的距离，包括页面的滚动条）

4 设置遮罩层的宽度和高度等于目标元素的宽度和高度

5 最重要的一步，设置遮罩层的四个边框的大小是决定效果至关重要的一步。

上边框 = offsetTop

右边框 = pageWidth - targetWdith - offsetLeft

下边框 = pageHeight - targetHeight - offsetTop

左边框 = offssetLeft

6 针对于浏览器的resize事件，同步实现遮罩边框的改变

源码如下：

<style>  
html{width:100%;height:100%;}  
*{margin:0;padding:0;}body{background:#f2f2f2;width:100%;height:100%;}  
.cover {  
    display: none;  
    position: absolute;  
    width: 0; height: 0;  
    left: 0; top: 0; right: 0; bottom: 0;  
    border: 0 solid #000;  
    opacity: .5;  
    filter: alpha(opacity=5);  
    z-index: 9;  
    /* 过渡效果 */  
    transition: all .25s;  
    /* 边缘闪动问题fix */  
    box-shadow: 0 0 0 100px #000;  
    overflow: hidden;  
}  
.cover::before {  
    content: '';  
    width: 100%; height:100%;  
    border-radius: 50%;  
    border: 400px solid #000;  
    position: absolute;  
    left: -400px; top: -400px;  
    box-shadow: inset 0 0 5px 2px rgba(0,0,0,.5);  
}  
/* IE7, IE8 img */  
.cover > img {  
    width: 100%; height: 100%;      
}  
a{display: block;width:100px;height:50px;line-height: 50px;font-size:12px;}  
#add{height:50px;line-height: 50px;margin-top:10px;background:#fff;}  
#aa{width:150px;height:50px;line-height:50px;margin-top:10px;}  
span{display:inline-block;}  
</style>  
<div id="cover" class="cover"></div>  
<div id="aa">请添加您的收货地址</div><br><br>  
<span id="bb">您的姓名</span><br><br><br>  
<span id="cc">请添加您的电话号码3请添加您的电话号码</span>

<script>  
var coverGuide = function(cover, target) {  
    var body = document.body, doc = document.documentElement;  
    if (cover && target) {  
        // target size(width/height)  
        var targetWidth = target.clientWidth,  
            targetHeight = target.clientHeight;  
        // page size  
        var pageWidth = doc.scrollWidth,  
            pageHeight = doc.scrollHeight;  
        // offset of target      
        var offsetTop = target.getBoundingClientRect().top + (body.scrollTop || doc.scrollTop),  
            offsetLeft = target.getBoundingClientRect().left + (body.scrollLeft || doc.scrollLeft);  
        // set size and border-width  
        cover.style.width = targetWidth + 'px';  
        cover.style.height = targetHeight + 'px';      
        cover.style.borderWidth =   
            offsetTop + 'px ' +   
            (pageWidth - targetWidth - offsetLeft) + 'px ' +  
            (pageHeight - targetHeight - offsetTop) + 'px ' +   
            offsetLeft + 'px';  
          
        cover.style.display = 'block';  
              
        // resize  
        if (!cover.isResizeBind) {  
            if (window.addEventListener) {  
                window.addEventListener('resize', function() {  
                    coverGuide(cover, target);  
                });      
                cover.isResizeBind = true;  
            } else if (window.attachEvent) {  
                window.attachEvent('onresize', function() {  
                    coverGuide(cover, target);  
                });  
                cover.isResizeBind = true;  
                  
                // IE7, IE8 box-shadow hack  
                cover.innerHTML = '<img src="guide-shadow.png">';  
            }  
        }  
    }  
};  
  
var elCover = document.getElementById('cover');  
var a       = document.getElementById("aa");  
var arrElTarget = [a,  
    document.getElementById('bb'),   
    document.getElementById('cc')  
], index = 0;  
  
coverGuide(elCover, a);  
  
elCover.onclick = function() {  
    index++;  
    if (!arrElTarget[index]) {  
        index = 0;      
    }  
    coverGuide(elCover, arrElTarget[index]);  
};    
</script>

这样就可以实现一个页面多个高亮区域不停的来回调动

页面跳转的时候要在updated的钩子里执行方法

来源：https://www.cnblogs.com/lrxsblog/p/8967840.html

标签

遮罩层

css

offsettop