本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)頁(yè)面高亮操作提示和蒙板的具體代碼，供大家參考，具體內(nèi)容如下
在頁(yè)面上，有時(shí)候會(huì)遇到操作提示，如下圖所示。
可以很直觀的告訴用戶，關(guān)鍵的操作在哪里，有什么做作用。
需要說(shuō)明的是，被高亮的部分，并不是目標(biāo)的真實(shí)標(biāo)簽，而是用的其他標(biāo)簽?zāi)M的。
真實(shí)的標(biāo)簽被 mask 層蓋住了，在下方呢。
標(biāo)簽高亮的部分和操作提示框，都是用 js 動(dòng)態(tài)生成的。
這里關(guān)鍵的知識(shí)點(diǎn)：
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 代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!-- 模擬頭部 --><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 --> |
基本樣式如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
.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 代碼如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
// 獲取目標(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#step1let 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);// 生成 maskmask = 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 style="width: 490px; height: 300px;background:url('images/op_tips.png') no-repeat;"> <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);}); |
簡(jiǎn)單進(jìn)行了下函數(shù)封裝，但是還是覺(jué)得代碼寫(xiě)的不夠完美。比如用JS生成了樣式，其實(shí)可以把一些樣式封裝在CSS 中。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/weixin_42703239/article/details/112123744
