9.JavaScript核心BOM操作学习（界面交互功能）——通过JavaScript实现PC网页特效（如何让盒子水平垂直居中），通过JavaScript完成模态框的实现（有源代码）

最新推荐文章于 2024-05-28 20:20:07 发布

愿时间能学会宽恕

最新推荐文章于 2024-05-28 20:20:07 发布

阅读量207

点赞数

分类专栏：网页前端开发js,vue等知识文章标签： css 定位 js html javascript

尊重版权，转载需指明

本文链接：https://blog.csdn.net/getture/article/details/108053742

版权

网页前端开发js,vue等知识专栏收录该内容

24 篇文章 0 订阅

订阅专栏

7.PC网页特效

①元素偏移量offset系列

offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等

获得元素远距离带有定位父元素的位置
获取元素自身的大小（宽度、高度）
注意：返回的数值都不带但闻
    offset系列属性
         element.offsetParent：返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body
         element.offsetTop：返回元素相对带有定位父元素上方的偏移
         element.offsetLeft：返回元素相对带有定位父元素左边框的偏移
         element.offsetWidth：返回自身包括padding、边框、内容区的宽度，返回数值不带单位
         element.offsetHeight：返回自身包括padding、边框、内容区的宽度，返回数值不带单位

<style>
/*	*{
		padding: 0px;
		margin: 0px;
	}*/
	#father{
		width:200px;
		height:200px;
		background-color:pink;
		margin:100px;
		position: relative;
	}
	#son{
		width:100px;
		height:100px;
		position: absolute;
		background-color:red;
		margin-left:50px;
		margin-top: 50px;
	}
</style>
<body>
	<div id="father">
		<div id="son">
		</div>
	</div>
	<script>
		var father=document.querySelector('#father');
		var son=document.querySelector('#son');
		son.innerHTML+='距离顶部：'+son.offsetTop+'距离左侧：'+son.offsetLeft+'宽度：'+son.offsetWidth+'<br>高度：'+son.offsetHeight;
		son.innerHTML+='父亲：'+son.offsetParent;
		//下面效果与上面相同
		//son.innerHTML+='父亲：'+son.parentNode;
		father.innerHTML+='距离顶部:'+father.offsetTop+'距离左侧:'+father.offsetLeft+'宽度：'+father.offsetWidth+'高度：'+father.offsetHeight;
	</script>
</body>

offset和style的区别

offset

offset可以得到任意样式表中的样式值
offset系列获得的数值是没有单位的
offsetWidth包含padding+border+width
offsetWidth等属性是只读属性，只能获取不能赋值
所以，我们想要获取元素大小位置，用offset更合适

style

style只能得到行内样式中的样式值（就是只能获得body标签里的）
style.width获得的是带有单位的字符串
style.width获得不包含padding和border的值
style.width是可读写属性，可以获得也可以赋值
所以，我们想要给元素更改值，则需要用style改变

<style>
	div{
		height:200px;
		padding:10px;
	}
</style>
<body>
	<div style="width:200px; background-color:pink"></div>
	<script>
		var div=document.querySelector('div');
		//只是行内样式，不包括padding和border，可读可写
		div.innerHTML+='style行内值：'+div.style.width+'<br>';
		div.innerHTML+='style非行内值(不显示):'+div.style.height+'<br>';
		//所有样式，包括padding和border，只可读
		div.innerHTML+='offset值：'+div.offsetWidth+'<br>';
	</script>
</body>

案例：显示鼠标在盒子中的坐标

<style>
	*{
		padding:0px;
		margin: 0px;
	}
	div{
		margin:0px auto;
		height:200px;
		width:200px; 
		background-color:pink;
	}
</style>
<body> 
	<div></div>
	<script>
		var div=document.querySelector('div');
		var h=div.offsetTop;
		var w=div.offsetLeft;
		document.querySelector('div').addEventListener('mousemove',function(e){
			var x=e.pageX;
			var y=e.pageY;
			console.log(x-w);
			div.innerHTML='横坐标'+(x-w)+'纵坐标'+(y-h);
		})
	</script>
</body>

案例：拖动模态框
案例分析：
      ① 点击弹出层、模态框和遮挡层就会显示出来diaplay：block;
      ② 点击关闭按钮，模态框和遮挡层就会隐藏起来display：none;
      ③ 在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标
      ④ 触发事件是鼠标按下mousedown，鼠标移动mousemove，鼠标松开mouseup
      ⑤ 拖拽过程：鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框可以跟着鼠标走
     &nbsp⑥ 鼠标按下出发的事件源是最上面一行;
      ⑦ 鼠标的坐标减去鼠标在盒子内的坐标为，模态框的位置
      ⑧ 鼠标按下，我们要得到鼠标在盒子的坐标
      ⑨ 鼠标移动，就让模态框的坐标设置为：鼠标坐标减去盒子坐标即可，注意移动事件写道按下事件里面

 <style>
	body{
		padding: 0px;
		margin: 0px;
	}
	.first_bgc{
		position: relative;
		text-align: center;
	}
	.main_bgc{
		top: 0px;
		position: absolute;
		text-align:center;
		font-size: 30px;
		display: none;
		background-color: rgba(215,215,215,0.9);
	}
	.main{
		width: 800px;
		height:500px;
		margin: 0 auto;
	}
	.login{
		width:400px;
		height: 300px;
		top: 150px;		
		position: fixed;
		background-color: pink;
		display: none;
		border-radius: 10px;
		//水平垂直居中
		left: 50%;
		top:50%;
		transform: translate(-50%,-50%);
	}
	#icon{
		position: absolute;
		right: -10px;
		top:-10px;
		font-size: 5px;
		width: 30px;
		height: 30px;
		line-height: 30px;
		border-radius: 15px;
		background-color: white;
		cursor: pointer;
	}
	input{
		border:none;
		border-radius: 2px;
		cursor: pointer;
	}
</style>
<body> 
	<div class="first_bgc">
		<div class="nav"><a href="javascript:;">点击登录</a></div>
	</div>

	<div class="main_bgc">
		<div class="login">
			<div id="move_event">用户登录</div>
			<div id="icon">关闭</div>
			<form action="javascript:" >
				<input type="text" name="login" >
				<input type="submit" name="">
			</form>
		</div>
	</div>
	<script type="text/javascript">
		var login_btn=document.querySelector('.nav').querySelector('a');
		var main_bgc=document.querySelector('.main_bgc');
		var login=document.querySelector('.login');
		var login_move=document.querySelector('#move_event');
		var icon=document.querySelector('#icon');
		console.log(window.innerWidth);
		window.addEventListener('mousemove',function(){
			main_bgc.style.width=window.innerWidth+'px';
			main_bgc.style.height=window.innerHeight+'px';
		})
		login_btn.onclick=function(){
			main_bgc.style.display='block';
			login.style.display='block';
		}
		icon.onclick=function(){
			main_bgc.style.display='none';
			login.style.display='none';
		}
		login_move.addEventListener('mousedown',function(e){
			var x_start=e.pageX;
			var y_start=e.pageY;
			var box_x_start=x_start-login.offsetLeft;
			var box_y_start=y_start-login.offsetTop;

			document.addEventListener('mousemove',move)
			function move(e){
				var x_now=e.pageX;
				var y_now=e.pageY;
				login.style.left=x_now-box_x_start+'px';
				login.style.top=y_now-box_y_start+'px';								
			}
								
			document.addEventListener('mouseup',function(e){
				//让移动停止，就直接移除该事件就可以
				document.removeEventListener('mousemove',move);
			})

		})
	</script>
</body>

附：如何让盒子水平垂直居中：

	//水平垂直居中
	position:absolute;
	left: 50%;
	top:50%;
	transform: translate(-50%,-50%);

愿时间能学会宽恕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录