JavaScript实例第十八天

最新推荐文章于 2024-06-07 09:18:52 发布

艰难的路

最新推荐文章于 2024-06-07 09:18:52 发布

阅读量790

点赞数

分类专栏：前端Javascript实例文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_51649346/article/details/121224192

版权

前端Javascript实例专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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;//事件发生时的x坐标
		y=e.clientY;//事件发生时的y坐标
		i=document.getElementById("id-div-box").offsetLeft;//获取左边的坐标
		t=document.getElementById("id-div-box").offsetTop;//获取上边的坐标，与i连起来就是获取左上角的坐标
		isDrag=true;
		
	}
		function mouseMove(event){
			if(isDrag){
				var e=event;
				var box=document.getElementById("id-div-box");
				var newLeft=l+e.clientX-x;//计算新的left的值
				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;/**1.相对原本自己元素应该在的位置而进行的调整
2.不影响其他元素的布局。*/
		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>

艰难的路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实例第十八天

2021.11.9实例一、隐藏层<!doctype html><html><head><meta charset="utf-8"><title>隐藏层</title></head><body> <div id="id-div"> <p>这是一个隐藏层</p> </div> <input type="button" value="隐藏上
复制链接

扫一扫