js에서 마스크 효과를 얻는 방법
- 王林앞으로
- 2020-04-06 09:18:352297검색
아이디어를 분석해 보겠습니다.
1. 모니터 버튼 클릭
2. 버블링 방지(가장 중요한 점)
3. 스크롤 막대 숨기기
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;
추천 관련 튜토리얼:
js 튜토리얼위 내용은 js에서 마스크 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 jb51.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：js에서 레지스트리를 수정하는 방법다음 기사：js에서 레지스트리를 수정하는 방법