使用JavaScript怎么编写一个页面高亮操作提示功能-创新互联
这期内容当中小编将会给大家带来有关使用JavaScript怎么编写一个页面高亮操作提示功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比扎赉诺尔网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式扎赉诺尔网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖扎赉诺尔地区。费用合理售后完善，十余年实体公司更值得信赖。
1、要用 JS 获取目标标签的位置。
el.getBoundingClientRect() 可以获得标签距离窗口的位置。
window.pageXOffset
window.pageYOffset
则是获取页面左，上边滚动出去部分的长度。
利用它们相加，可以得到目标标签在页面中的绝对位置。再把【高亮】标签放在相同位置就可以。
2、要能动态生成提示标签和遮罩层（一般是半透明的黑色）
3、还要用到 CSS 中的定位。
为了更直接的模拟真实情况，我采用了一些标签来模拟页面的结构。
HTML 代码如下：
模拟头部
模拟导航
操作第一步
操作第二步
操作第三步
模拟其他部分
基本样式如下：
.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 :`
根据项目内容调整样式
确定
