html5页面蒙版原理,js如何实现蒙版效果

我会带着你远行 2022-10-05 15:54 315阅读 0赞

![5268f80b9b1e01f982625ef6fac83ca1.png][]

![a8d5d05949a7497d6df0b0c3c38d7dde.png][]

我们来分析一下思路：

1、监听按钮的点击

2、阻止冒泡(最关键的一点)

3、让隐藏的显示出来

4、隐藏滚动条

5、点击文档：获取点击的标签

判断：让显示的都隐藏

显示滚动条

\*\{

margin: 0;

padding: 0;

\}

html,body\{

width:100%;

height:100%;

\}

\#panel\{

width:100%;

height:2000px;

background-color:\#000;

opacity: 0.4; //透明度

filter: alpha(opacity： 40); //用于兼容IE浏览器

position: absolute;

top:0;

left:0;

display: none;

\}

\#box\{

width:300px;

height:300px;

background-color: \#fff;

position: absolute;

top:50%;

left:50%;

margin-left:-150px;

margin-top:-150px;

display: none;

border-radius: 5px;

\}

登录

window.onload = function ()\{

//1.监听事件的点击

btn.onclick = function (event)\{

//1.0 阻止冒泡

if(event && event.stopPropagation)\{ //W3c标准

event.stopPropagation();

\}else\{ //IEx系列 IE 678

event.cancelBubble = ture;

\}

//1.1隐藏的显现出来

$("box").style.display = "block";

$("panel").style.display = "block";

//1.2隐藏滚动条

document.body.style.overflow = "hidden";

\}

//2.点击文档

document.onclick = function (event)\{

var e = event || window.event;

//2.1获取点击的标签

var tranId = e.target ? e.target.id : e.srcElement.id; //target:获取当前操作对象

//2.2判断

if(tranId !== "box")\{

//1.1显示的隐藏出来

$("box").style.display = "none";

$("panel").style.display = "none";

//1.2显示滚动条

document.body.style.overflow = "auto";

\}else\{

window.location.href = "http://www.baidu.com";

\}

\}

\}

最为重要的一点是要阻止事件冒泡。

获取对象的id：var tranId = e.target ? e.target.id : e.srcElement.id;

相关教程推荐：js教程

[5268f80b9b1e01f982625ef6fac83ca1.png]: /images/20221005/755c3d8ad36f420ba109f372b5f96ae5.png
[a8d5d05949a7497d6df0b0c3c38d7dde.png]: /images/20221005/c937d9d866f543a0a96c606cfa79d56e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，315人围观）

还没有评论，来说两句吧...

相关阅读

相关 143: vue+openlayers 做蒙版过滤处理，实现剪切、遮罩效果

![在这里插入图片描述][a957f6e5910d474facb7f2ad7fab4ce3.png_pic_center] 第143个 [点击查看专栏目录][Link 1]

﹏ヽ暗。殇╰゛Y/ 2024年04月03日 13:29/ 0 赞/ 69 阅读

相关 mui点击蒙版点击蒙版让其不自动关闭

var mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调； mask.show();//显示遮

水深无声/ 2023年08月17日 15:54/ 0 赞/ 318 阅读

相关 Android ImageView蒙版、高斯模糊

文章目录效果图自定义View 使用方法 -------------------- 关于ImageView蒙版、高斯模糊的实

逃离我推掉我的手/ 2023年02月12日 05:59/ 0 赞/ 20 阅读

相关 android 渐变蒙版_Flutter新手引导蒙版（浮层）

题记 —— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。重要消息 f lutter中网络请求dio使用分析视频教程在这里 Flutter 从入

Bertha 。/ 2023年01月02日 03:21/ 0 赞/ 300 阅读

相关 PS使用蒙版

使用蒙版盖住不想要的部分，如下图， XX次判断 10秒39这部分我不想要，要把它隐藏，这个时候就可以用到蒙版功能。 ![20210226103909231.png][]![

以你之姓@/ 2022年11月03日 00:58/ 0 赞/ 255 阅读

相关 html5页面蒙版原理,js如何实现蒙版效果

![5268f80b9b1e01f982625ef6fac83ca1.png][] ![a8d5d05949a7497d6df0b0c3c38d7dde.png][] 我们

我会带着你远行/ 2022年10月05日 15:54/ 0 赞/ 316 阅读

相关蒙版缓存（Stencil buffer）

什么是蒙版缓存图像硬件中有个特殊内存，叫Stencil buffer。很多地方翻译做模板缓存，我觉的用蒙版缓存更贴切。因为这个缓存的和PS的图层蒙版很相似。渲染目标（Ren

阳光穿透心脏的1/2处/ 2022年09月30日 00:44/ 0 赞/ 210 阅读

相关 PS蒙版深度解析

ps四大核心技术是什么？通道、蒙版、路径、选区。但是很多人对它们的认识还停留在最初级的阶段，并没有深入的了解它们具体有什么作用，在发教程前，我翻阅了很多此类的教程，但是只是通过

爱被打了一巴掌/ 2022年08月14日 01:57/ 0 赞/ 272 阅读

相关 PS学习笔记----图层蒙版

图层蒙版：用以控制画面的显示和隐藏，从而实现图像的合成等操作。操作： 1.选中图层 2.单击“添加图层蒙版”按钮。 “蒙版

小鱼儿/ 2022年08月04日 12:38/ 0 赞/ 250 阅读

相关 js如何实现蒙版效果

js如何实现蒙版效果我们来分析一下思路： 1、监听按钮的点击 2、阻止冒泡（最关键的一点） 3、让隐藏的显示出来 4、隐藏滚动条 5、点击文档：获取点击的标签判断：让...

灰太狼/ 2020年06月07日 16:05/ 0 赞/ 853 阅读