DOM距离的各种常用方法及利用方法实现弹性球效果

最新推荐文章于 2023-01-30 22:27:06 发布

lm778

最新推荐文章于 2023-01-30 22:27:06 发布

阅读量169

点赞数

分类专栏： JS 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/m0_59798527/article/details/126292852

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

DOM距离方法

window滚动距离: window.pageXOffset,window.pageYoffset
适用于对浏览器的滑动、滚动 window.pageXOffset：指的是在水平方向上的滚动距离
window.pageYoffset：指的是在垂直方向的滚动距离；这两种方法只适用于Window
元素滚动距离: tag.scrollTop,tag.scrollLeft
tag标签
var _boll=document.querySelector(".boll");
上句是找到class类为boll的元素
若该元素可滑动
则可用_boll.scollTop获取顶部滚动距离
返回值是Number数值

window可视距离:window.innerHeight, window.innerWidth
指widow内可以输出东西的部分

元素的可视距离: tag.clientHeight,tag.clientWidth
元素控件距离: tag.offsetHeight,tag.offsetWidth
被撑开的距离: tag.scrollHieght,tag.scrollWidth
元素的位置: tag.offsetLeft,tag.offsetTop

自定义属性: data-属性名=“属性值”
获取自定义属性: tag.dataset.属性名

参考代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.outter {
				width: 300px;
				height: 300px;
				padding: 20px;
				border: 10px solid black;
				overflow: auto;
			}

			.inner {
				width: 100px;
				height: 600px;
				background-color: lightblue;
			}
		</style>
	</head>
	<body>
		<div class="outter">
			<div class="inner"></div>
		</div>
		<script>
			// 1、window的窗口的可视距离
			console.log(window.innerWidth, window.innerHeight);

			var _outter = document.querySelector(".outter");
			//2、dom元素的可视距离=内容区域+padding-滚动条
			console.log(_outter.clientWidth, _outter.clientHeight);

			//3、dom元素整个控件的距离=内容区域+padding+border
			console.log(_outter.offsetWidth, _outter.offsetHeight);

			//4、dom元素被撑开的距离=子元素+padding-滚动条
			console.log(_outter.scrollWidth, _outter.scrollHeight);
		</script>
	</body>
</html>

页面效果

在这里插入图片描述

动态弹性球效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.wrapper{
				width: 600px;
				height: 600px;
				border: 5px solid black;
				margin: 0 auto;
				position: relative;
			}
			.wrapper .boll{
				width: 80px;
				height: 80px;
				border-radius: 50%;
				background-color: red;
				position: absolute;
				bottom: 0;
				left: 0;
			}
			.box{
				text-align: center;
			}
			.box button{
				width: 200px;
				height: 50px;
				color:white;
				font-size: 30px;
				border: none;
				background-color: green;
			}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="wrapper">
				<div class="boll"></div>
			</div>
			<button>开始</button>
		</div>
		<script>
			//获取容器
			var _wrapper=document.querySelector(".wrapper");
			//开始按钮
			var _button=document.querySelector("button");
			//小球
			var _boll=document.querySelector(".boll");
			_button.onclick=function(){
				var speedX=6;  //x速度
				var speedY=10;  //y速度
				 var id=setInterval(function(){
					 //获取现有的left和top值
					 //如果到最右边，需要反方向
					 if(_wrapper.clientWidth-_boll.offsetLeft<=_boll.offsetWidth){
						 speedX*=-1;
					 }
					_boll.style.left=(_boll.offsetLeft+speedX)+"px"
					
					 //如果到最上边，需要反方向
					if(_boll.offsetTop<=0){
						speedY*=-1;
					}
					
					_boll.style.top=(_boll.offsetTop-speedY)+"px"
					
					//到最下边，需要反向
					if(_wrapper.clientHeight-_boll.offsetTop<=_boll.offsetHeight){
						speedY*=-1;
					}
					
					//到最左边，需要反向
					if(_boll.offsetLeft<=0){
						speedX*=-1;
					}
				 },100)
			}
		</script>
	</body>
</html>