本文实例为大家分享了JavaScript实现页面高亮操作提示和蒙板的具体代码,供大家参考,具体内容如下
在页面上,有时候会遇到操作提示,如下图所示。
可以很直观的告诉用户,关键的操作在哪里,有什么做作用。
需要说明的是,被高亮的部分,并不是目标的真实标签,而是用的其他标签模拟的。
真实的标签被 mask 层盖住了,在下方呢。
标签高亮的部分和操作提示框,都是用 js 动态生成的。
这里关键的知识点:
1、要用 JS 获取目标标签的位置。
el.getBoundingClientRect() 可以获得标签距离窗口的位置。
window.pageXOffset
window.pageYOffset
则是获取页面左,上边滚动出去部分的长度。
利用它们相加,可以得到目标标签在页面中的绝对位置。再把【高亮】标签放在相同位置就可以。
2、要能动态生成提示标签和遮罩层(一般是半透明的黑色)
3、还要用到 CSS 中的定位。
为了更直接的模拟真实情况,我采用了一些标签来模拟页面的结构。
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 --> <!-- 模拟导航 --> < 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 --> |
基本样式如下:
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
|
// 获取目标标签 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 中。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/weixin_42703239/article/details/112123744