這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)使用JavaScript怎么編寫(xiě)一個(gè)頁(yè)面高亮操作提示功能，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都創(chuàng)新互聯(lián)公司-專(zhuān)業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性?xún)r(jià)比扎賚諾爾網(wǎng)站開(kāi)發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式扎賚諾爾網(wǎng)站制作公司更省心,省錢(qián),快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋扎賚諾爾地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴(lài)。

1、要用 JS 獲取目標(biāo)標(biāo)簽的位置。

el.getBoundingClientRect() 可以獲得標(biāo)簽距離窗口的位置。
window.pageXOffset
window.pageYOffset
則是獲取頁(yè)面左，上邊滾動(dòng)出去部分的長(zhǎng)度。
利用它們相加，可以得到目標(biāo)標(biāo)簽在頁(yè)面中的絕對(duì)位置。再把【高亮】標(biāo)簽放在相同位置就可以。

2、要能動(dòng)態(tài)生成提示標(biāo)簽和遮罩層（一般是半透明的黑色）

3、還要用到 CSS 中的定位。

為了更直接的模擬真實(shí)情況，我采用了一些標(biāo)簽來(lái)模擬頁(yè)面的結(jié)構(gòu)。

HTML 代碼如下：

<!-- 模擬頭部 -->
<header class="header">
 模擬頭部
</header>
<!-- 模擬頭部 end -->
<!-- 模擬導(dǎo)航 -->
<nav class="mainNav">
 模擬導(dǎo)航
</nav>
<!-- 模擬導(dǎo)航 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 代碼如下：

// 獲取目標(biāo)標(biāo)簽
let step1 = document.getElementById("step1");
let body = document.getElementsByTagName("body")[0];

let tips = null,
 mask = null,
 tipsContent= null;
// 創(chuàng)建標(biāo)簽。默認(rèn)生成 mask 標(biāo)簽
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 已經(jīng)存在，不需要再創(chuàng)建。
 }
};
// 去掉遮罩層
let removeTag = function(tag){
 tag.parentNode.removeChild( tag );
};

// 獲取要提示的內(nèi)容的位置。這里是 li#step1
let getPostion = function(tag){
 let x = tag.getBoundingClientRect().x ;
 let y = tag.getBoundingClientRect().y ;
 return {x:x,y:y};
};
// 設(shè)置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 );
};
// 獲取要提示的內(nèi)容的標(biāo)簽位置
let tagP = getPostion(step1);
// 生成 mask
mask = makeElement();
// 生成目標(biāo)標(biāo)簽的高亮框
tips = makeElement({
 id:"tips",
 classN:"tips",
 content :"操作第一步" // 偽裝原標(biāo)簽的內(nèi)容
});
setPosition(tips, {
 x:tagP.x + window.pageXOffset,
 y:tagP.y + window.pageYOffset,
 w:step1.offsetWidth ,
 h:step1.offsetHeight
});


// 生成提示內(nèi)容框
tipsContent = makeElement({
 id:"tipsContent",
 classN:"tipsContent posa",
 content :`<div >
    <div class="tipsc_content">
     根據(jù)項(xiàng)目?jī)?nèi)容調(diào)整樣式
     <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
});

// 點(diǎn)擊“確定”按鈕
let okBtn = document.getElementById("okBtn");
okBtn.addEventListener("click",function(){
 removeTag(mask);
 removeTag(tips);
 removeTag(tipsContent);
});

// 當(dāng)窗口調(diào)整大小時(shí)候，調(diào)整 tips 位置。
window.addEventListener("resize",function(){
 tagP = getPostion(step1);
 setPosition(tips,tagP);
});

上述就是小編為大家分享的使用JavaScript怎么編寫(xiě)一個(gè)頁(yè)面高亮操作提示功能了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站名稱(chēng)：使用JavaScript怎么編寫(xiě)一個(gè)頁(yè)面高亮操作提示功能-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://chinadenli.net/article32/pegsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、域名注冊(cè)、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計(jì)公司、軟件開(kāi)發(fā)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)