服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - JavaScript实现页面高亮操作提示和蒙板

JavaScript实现页面高亮操作提示和蒙板

2021-12-24 15:15stones4zd js教程

这篇文章主要介绍了JavaScript实现页面高亮操作提示和蒙板,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现页面高亮操作提示和蒙板的具体代码,供大家参考,具体内容如下

在页面上,有时候会遇到操作提示,如下图所示。
可以很直观的告诉用户,关键的操作在哪里,有什么做作用。

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

延伸 · 阅读

精彩推荐
  • js教程js正则表达式简单校验方法

    js正则表达式简单校验方法

    在本篇文章里小编给大家整理了一篇关于js正则表达式简单校验方法,有需要的朋友们可以参考下。...

    小妮浅浅11112021-12-24
  • js教程微信小程序视频弹幕发送功能的实现

    微信小程序视频弹幕发送功能的实现

    这篇文章主要介绍了微信小程序视频弹幕发送功能的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的...

    保护我方豆豆4812021-12-21
  • js教程js制作提示框插件

    js制作提示框插件

    这篇文章主要介绍了js制作提示框插件的方法,帮助大家更好的理解和使用js,感兴趣的朋友可以了解下...

    lanshanxiao10082021-12-18
  • js教程js实现随机点名功能

    js实现随机点名功能

    这篇文章主要为大家详细介绍了js实现随机点名功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    等待的L先生4862021-12-16
  • js教程Strve.js开发一个属于自己的库或框架

    Strve.js开发一个属于自己的库或框架

    Strve.js是一个可以将字符串转换为视图的JS库。这里的字符串指的是模板字符串,所以你仅需要在JavaScript中开发视图。Strve.js不仅易于上手,还便于灵活拆装...

    前端历劫之路5702021-12-23
  • js教程Javascript 模拟mvc实现点餐程序案例详解

    Javascript 模拟mvc实现点餐程序案例详解

    这篇文章主要介绍了Javascript 模拟mvc实现点餐程序案例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参...

    LiOnTalKING12072021-12-18
  • js教程微信小程序实现简单购物车功能

    微信小程序实现简单购物车功能

    这篇文章主要为大家详细介绍了微信小程序实现简单购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    mossbaoo4972021-12-22
  • js教程微信小程序自定义modal弹窗组件的方法详解

    微信小程序自定义modal弹窗组件的方法详解

    这篇文章主要给大家介绍了关于微信小程序自定义modal弹窗组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学...

    遇见小美好12002021-12-15