本文介绍如何使用JavaScript实现页面操作引导的高亮与蒙板效果。通过getBoundingClientRect获取目标元素位置，动态生成半透明遮罩层与提示框，利用CSS定位实现精准覆盖。代码包含HTML结构模拟、基础样式及JS逻辑封装，旨在直观指引用户关键操作步骤。
JavaScript实现页面高亮与操作提示蒙板
本文分享了利用JavaScript实现页面高亮显示、操作引导提示以及遮罩层效果的具体代码实现，供读者参考学习。
在网页交互中，经常需要向用户展示操作指引，如示例图片所示。这种直观的方式能有效告知用户关键操作区域及其功能作用。
需要注意的是，图中被高亮显示的区域并非目标元素的真实DOM标签，而是通过其他标签模拟生成的视觉效果。真实的业务标签被下方的mask（遮罩）层所覆盖。
实现高亮区域以及操作提示框，均是通过JavaScript动态创建和插入DOM节点完成的。
核心实现原理
实现该功能涉及以下核心知识点：
第一，利用JavaScript获取目标元素在页面中的确切位置。
可以使用el.getBoundingClientRect()方法获取元素相对于视口的位置。结合window.pageXOffset和window.pageYOffset获取页面滚动偏移量，将两者相加即可得到元素在文档中的绝对坐标。据此，可以将高亮标签定位到相同位置。
第二，需要动态生成提示标签和遮罩层（通常为半透明黑色背景）。
第三，必须结合CSS中的定位属性（如absolute或fixed）来确保元素位置准确。
代码实现示例
为了更真实地模拟实际应用场景，本文使用特定标签构建了模拟的页面结构。
对应的HTML结构代码如下：
<!-- 模拟头部 -->
<header class="header">
模拟头部
</header>
<!-- 模拟头部 end -->
<!-- 模拟导航 -->
<nav class="mainNav">
模拟导航
</nav>
<!-- 模拟导航 end -->
<!-- 主体部分 -->
<main class="pageMain">
<ul class="sidebar">
<li id="step1"><a href="#" >操作第一步</a></li>
<li><a href="#" >操作第二步</a></li>
<li><a href="#">操作第三步</a></li>
</ul>
<div class="other">
模拟其他部分
</div>
</main>
<!-- 主体部分 end -->基础CSS样式定义如下：
.posa{
position: absolute;
}
.header{
height: 200px;
width: 1200px;
margin-left: auto;
margin-right: auto;
background: #eee;
}
.mainNav{
height: 80px;
width: 1200px;
margin-left: auto;
margin-right: auto;
background: #5f5fd7;
}
.pageMain{
width: 1200px;
margin-left: auto;
margin-right: auto;
background: #eee;
}
.sidebar{
width: 200px;
line-height: 50px;
text-align: center;
background: #fff;
border:1px #666 solid;
border-bottom:none;
}
.sidebar a{
display: block;
border-bottom:1px #666 solid;
color: #333;
}
.other{
height: 700px;
background: #708af5;
font-size: 30px;
color: #fff;
}
.mask{
position: fixed;
top:0;
right:0;
bottom: 0;
left:0;
background: rgba(0, 0, 0, 0.48);
}
.tips{
background: #fff;
position: absolute;
line-height: 50px;
color: #333;
display: block;
text-align: center;
}
.tipsc_content{
margin-left: 200px;
padding-top: 100px;
margin-right: 80px;
}
.tipsc_btn{
padding-top: 30px;
}
.tipsc_btn button{
outline:none;
width: 100px;
height: 40px;
background: #09a366;
color: #fff;
border:none;
cursor: pointer;
}核心JavaScript逻辑代码如下：
// 获取目标标签
let step1 = document.getElementById("step1");
let body = document.getElementsByTagName("body")[0];
let tips = null,
mask = null,
tipsContent= null;
// 创建标签。默认生成 mask 标签
let makeElement = function({id="mask",classN="mask",content = ""}={}){
let eId = document.getElementById(id);
if( !eId ){ // 判断 mask 是否存在
eId = document.createElement("div");
eId.id = id;
eId.className =classN;
eId.innerHTML = content;
body.appendChild( eId );
return eId ;
}else{
return eId; // mask 已经存在，不需要再创建。
}
};
// 去掉遮罩层
let removeTag = function(tag){
tag.parentNode.removeChild( tag );
};
// 获取要提示的内容的位置。这里是 li#step1
let getPostion = function(tag){
let x = tag.getBoundingClientRect().x ;
let y = tag.getBoundingClientRect().y ;
return {x:x,y:y};
};
// 设置tips的位置
let setPosition = function(tips, {x="0",y="0",w="0",h="0"}={}){
tips.style.left = x + "px" ;
tips.style.top = y+ "px" ;
tips.style.width = w+ "px"
tips.style.height = h + "px"
console.info(tagP.x , tagP.y );
};
// 获取要提示的内容的标签位置
let tagP = getPostion(step1);
// 生成 mask
mask = makeElement();
// 生成目标标签的高亮框
tips = makeElement({
id:"tips",
classN:"tips",
content :"操作第一步" // 伪装原标签的内容
});
setPosition(tips, {
x:tagP.x + window.pageXOffset,
y:tagP.y + window.pageYOffset,
w:step1.offsetWidth ,
h:step1.offsetHeight
});
// 生成提示内容框
tipsContent = makeElement({
id:"tipsContent",
classN:"tipsContent posa",
content :`<div style="width: 490px; height: 300px;background:url('images/op_tips.png') no-repeat;">
<div class="tipsc_content">
根据项目内容调整样式
<div class="tipsc_btn">
<button type="button" id="okBtn">确定</button>
</div>
</div>
</div>`
});
setPosition(tipsContent, {
x:tagP.x + window.pageXOffset+200,
y:tagP.y + window.pageYOffset-100,
w:490,
h:300
});
// 点击“确定”按钮
let okBtn = document.getElementById("okBtn");
okBtn.addEventListener("click",function(){
removeTag(mask);
removeTag(tips);
removeTag(tipsContent);
});
// 当窗口调整大小时候，调整 tips 位置。
window.addEventListener("resize",function(){
tagP = getPostion(step1);
setPosition(tips,tagP);
});代码进行了简单的函数封装，但仍有优化空间。例如，部分样式可以通过JS生成，但建议将样式封装在CSS文件中以分离关注点。
以上内容为本文的全部介绍，希望能为读者的学习提供有益帮助，欢迎继续支持本站获取更多技术分享。