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


Posted in Javascript onJanuary 04, 2021

本文实例为大家分享了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 中。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
js 调整select 位置的函数
Feb 21 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
jquery div拖动效果示例代码
Dec 08 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
webpack之devtool详解
Feb 10 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
vue里的data要用return返回的原因浅析
May 28 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
js正则表达式简单校验方法
Jan 03 #Javascript
vue+vant 上传图片需要注意的地方
Jan 03 #Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 #Vue.js
vue中使用echarts的示例
Jan 03 #Vue.js
vue 动态生成拓扑图的示例
Jan 03 #Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 #Vue.js
vue中activated的用法
Jan 03 #Vue.js
You might like
php 进度条实现代码
2009/03/10 PHP
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
echarts设置图例颜色和地图底色的方法实例
2018/08/01 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
Python网络编程 Python套接字编程
2017/09/13 Python
Python实现的特征提取操作示例
2018/12/03 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
澳洲的服装老品牌:SABA
2018/02/06 全球购物
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
锦旗标语大全
2014/06/23 职场文书
大学生心理活动总结
2014/07/04 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
Pandas 稀疏数据结构的实现
2021/07/25 Python
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python