2021.11.11
实例一、隐藏层
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>隐藏层</title>
</head>
<body>
<div id="id-div">
<p>这是一个隐藏层</p>
</div>
<input type="button" value="隐藏上面的内容" id="id-input-hidden">
<input type="button" value="显示上面的内容" id="id-input-show">
</body>
<script type="text/javascript">
window.onload=function(){
var hidden=document.getElementById("id-input-hidden");
hidden.onclick=function(){
document.getElementById("id-div").style.display="none"
}
var show=document.getElementById("id-input-show");
show.onclick=function(){
document.getElementById("id-div").style.display="block"
}
}
</script>
</html>
实例二、可拖动的层
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>可拖动的层</title>
</head>
<body>
<div id="id-div-box" style="">
<h3 align="right" id="id-box-drag" style="">
<span style="float:left;color:white;">标题栏</span>
</h3>
<div id="id-box-msg">这是一个可拖动的层</div>
<div id="id-box-pos"></div>
</div>
</body>
<script type="text/javascript">
var isDrag=false;
var l=0;
var t=0;
var x,y;
window.onload=function(ev){
var boxDrag=document.getElementById("id-box-drag");
boxDrag.onmousedown=mouseDown;
boxDrag.onmousemove=mouseMove;
boxDrag.onmouseup=mouseUp;
var initPos="X pos:200,Y pos : 100";
document.getElementById("id-box-pos").innerText=initPos;
}
function mouseDown(event){
var e=event;
x=e.clientX;
y=e.clientY;
i=document.getElementById("id-div-box").offsetLeft;
t=document.getElementById("id-div-box").offsetTop;
isDrag=true;
}
function mouseMove(event){
if(isDrag){
var e=event;
var box=document.getElementById("id-div-box");
var newLeft=l+e.clientX-x;
var newTop=t+e.clientY-y;
var newPos="X pso:"+newLeft+",Y pos:"+newTop;
document.getElementById("id-box-pos").innerText=newPos;
box.style.left=newLeft+"px"
box.style.top=newTop+"px"
}
}
function mouseUp(event){
if(isDrag){
isDrag=false;
}
}
</script>
</html>
实例三、遮盖层的效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>遮盖层的效果</title>
</head>
<style type="text/css">
div#id-div-layer{
position: relative;
width: 320px;
height: 160px;
border: 1px solid gray;
margin: auto;
font-size: 5px;
padding: 2px;
}
</style>
<body>
<div id="id-div-layer">
<div id="id-div-maskLayer" style="display: none">
<p>测试遮盖层效果</p>
<p><input type="text"></p>
<p><input type="button" value="提交"></p></div><!-- 这里是遮盖层 -->
<input type="button" value="显示遮盖层" id="id-input-show">
<input type="button" value="隐藏遮盖层" id="id-input-cancel">
<input type="button" value="遮盖全部页面" id="id-input-body">
</div>
<div id="id-div-body" style="display: none"></div>
</body>
<script type="text/javascript">
window.onload=function(){
var show=document.getElementById("id-input-show");
show.onclick=function(){
var showdiv=document.getElementById("id-div-maskLayer")
showdiv.style.display="block"
}
var cancel=document.getElementById("id-input-cancel");
cancel.onclick=function(){
var canceldiv=document.getElementById("id-div-maskLayer")
canceldiv.style.display="none"
}
var body=document.getElementById("id-input-body");
body.onclick=function(){
document.getElementById("id-div-layer").style.display="none"
}
}
</script>
</html>