引导步骤遮罩层html,css3 引导遮罩层

要实现遮罩层和部分区域高亮显示，这里的思路是应用了元素的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事件，同步实现遮罩边框的改变

源码如下：

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;}

请添加您的收货地址

您的姓名

请添加您的电话号码3请添加您的电话号码

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 = '';

}

}

}

};

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]);

};

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

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

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