js实现蒙版效果
更新时间：2020年01月11日 10:07:05 投稿：lijiao
这篇文章主要为大家详细介绍了比较常见的js蒙版效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现蒙版效果展示的具体代码，供大家参考，具体内容如下
思路
1.监听按钮的点击
2.阻止冒泡（最关键的一点）
3.让隐藏的显示出来
4.隐藏滚动条
5.点击文档：获取点击的标签
判断：让显示的都隐藏
显示滚动条
<style>
*{
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;
}
</style>
</head>
<body>
<button id="btn">登录</button>
<div id="panel"></div>
<div id="box"></div>
<script src="js/myFunc.js"></script>
<script>
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";
}
}
}
</script>
最为重要的一点是要阻止事件冒泡
获取对象的id： var tranId = e.target ? e.target.id : e.srcElement.id;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了openlayers4实现的点动态扩散，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
小编给大家推荐几款使用Javascript实现的遮罩效果登陆框，其实这种效果是很常见的，在许多互动的社区及其它的一些地方，弹出框应用想当流行，在不妨碍网页运行的情况下，用户可以输入登录信息，实现完美登录。2015-11-11
JavaScript中for-in和for-of的不同之处及如何正确使用
这篇文章主要给大家介绍了关于JavaScript中for-in和for-of的不同之处及如何正确使用它们的相关资料,无论是for...in还是for...of语句都是迭代一些东西,它们之间的主要区别在于它们的迭代方式,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-05-05
如何通过js在上传前就拿到它的总帧数来判断呢？本文就跟大家分享一种解决方案，并将其封装成插件发布至npm仓库，快跟随小编一起学习一下吧2022-05-05
Javascript和Java、C这些语言不同，它是一种无类型、弱检测的语言。它对变量的定义并不需要声明变量类型，我们只要通过赋值的形式，可以将各种类型的数据赋值给同一个变量2012-01-01
图片img的src不变,想让浏览器重新加载怎么办,在图片地址src不变的情况下让浏览器重新加载图片,实际上在src不变时，浏览器直接就去读取缓存2013-03-03
firefox浏览器下javascript 拖动层效果与原理分析代码
这篇文章主要给大家介绍了关于在firefox浏览器下如何利用javascript实现拖动层效果，以及其中的原理分析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，下面来一起看看吧2007-12-12
Jsonp 关键字详解及json和jsonp的区别，ajax和jsonp的区别
这篇文章主要介绍了Jsonp 关键字详解及json和jsonp的区别，ajax和jsonp的区别 的相关资料,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了创建、调用JavaScript对象的方法集锦,需要的朋友可以参考下2014-12-12
这篇文章主要介绍了JS针对浏览器窗口关闭事件的监听方法,总结整理了几种常用的浏览器关闭事件监听方法,非常简单实用,需要的朋友可以参考下2016-06-06
最新评论