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 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
基础的prototype.js常用函数及其用法
Mar 10 Javascript
CSS常用网站布局实例
Apr 03 Javascript
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
动态添加删除表格行的js实现代码
Feb 28 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
javascript动态创建链接的方法
May 13 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
微信小程序实现电子签名功能
Jul 29 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将session信息存储到数据库的类实例
2015/03/04 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
jquery使用$(element).is()来判断获取的tagName
2014/08/24 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
vue的toast弹窗组件实例详解
2018/05/14 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
python判断字符串是否包含子字符串的方法
2015/03/24 Python
python如何在终端里面显示一张图片
2016/08/17 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
python中的colorlog库使用详解
2019/07/05 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
从numpy数组中取出满足条件的元素示例
2019/11/26 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
你对IPv6了解程度
2016/02/09 面试题
工业学校毕业生自荐信范文
2014/01/03 职场文书
社区国庆节活动方案
2014/02/05 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
海洋天堂观后感
2015/06/05 职场文书
婚礼迎宾词大全
2015/08/10 职场文书