JavaScript實現頁面高亮操作提示和蒙板
本文實例為大傢分享瞭JavaScript實現頁面高亮操作提示和蒙板的具體代碼，供大傢參考，具體內容如下
在頁面上，有時候會遇到操作提示，如下圖所示。
可以很直觀的告訴用戶，關鍵的操作在哪裡，有什麼做作用。
需要說明的是，被高亮的部分，並不是目標的真實標簽，而是用的其他標簽模擬的。
真實的標簽被 mask 層蓋住瞭，在下方呢。
標簽高亮的部分和操作提示框，都是用 js 動態生成的。
這裡關鍵的知識點：
1、要用 JS 獲取目標標簽的位置。
el.getBoundingClientRect() 可以獲得標簽距離窗口的位置。
window.pageXOffset
window.pageYOffset
則是獲取頁面左，上邊滾動出去部分的長度。
利用它們相加，可以得到目標標簽在頁面中的絕對位置。再把【高亮】標簽放在相同位置就可以。
2、要能動態生成提示標簽和遮罩層（一般是半透明的黑色）
3、還要用到 CSS 中的定位。
為瞭更直接的模擬真實情況，我采用瞭一些標簽來模擬頁面的結構。
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 -->
基本樣式如下：
.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 中。
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。