这篇文章主要介绍了JavaScript实现页面高亮操作提示和蒙板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现页面高亮操作提示和蒙板的具体代码，供大家参考，具体内容如下
在页面上，有时候会遇到操作提示，如下图所示。
可以很直观的告诉用户，关键的操作在哪里，有什么做作用。
需要说明的是，被高亮的部分，并不是目标的真实标签，而是用的其他标签模拟的。
真实的标签被 mask 层盖住了，在下方呢。
标签高亮的部分和操作提示框，都是用 js 动态生成的。
这里关键的知识点：
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 :` 根据项目内容调整样式 ` }); 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 中。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
以上就是JavaScript实现页面高亮操作提示和蒙板的详细内容，更多请关注本站其它相关文章！
