原生js实现小球在屏幕上自由移动，当遇到屏幕边缘时反弹

最新推荐文章于 2024-04-20 09:17:06 发布
最新推荐文章于 2024-04-20 09:17:06 发布
阅读量1.1k 收藏 9
点赞数 2
分类专栏： JavaScript 前端 文章标签： javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58309844/article/details/126292832
版权
这篇博客介绍了如何利用JavaScript和CSS实现一个趣味的前端效果：一个小球在屏幕上自由移动，并在碰到屏幕边缘时自动反弹。通过学习DOM的距离属性，开发者可以创建出这个互动效果。文章分为基础知识、实现代码和效果展示三个部分，详细讲解了HTML、CSS和JS的实现细节。
摘要由CSDN通过智能技术生成

学完dom的距离属性就可以做的案例，滚动小球！

文章目录

先看一下效果吧
在这里插入图片描述

一、基础知识

DOM距离属性

获取window的滚动距离
	window.pageXOffset，window.pageYOffset
获取元素的滚动距离
	tag.scrollLeft，tag.scrollTop
获取window的可视距离
	window.innerWidth，window.innerHeight
元素的可视距离=内容区域+padding-滚动条
	tag.clientWidth，tag.clientHeight
元素控件的距离=内容区+padding+border
	tag.offsetWidth，tag.offsetHeight
被撑开的距离=子元素+padding-滚动条
	tag.scrollWidth，tag.scrollHeight
元素的位置
	offsetLeft, tag.offsetTop

二、实现代码

1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div class="box">
			<div class
最低0.47元/天 解锁文章
1024A
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何利用js实现小球运动【全网最详解析】
weixin_54139195的博客
08-11 2663
js实现小球运动随着人工智能的不断发展，web前端这门技术也越来越重要，很多人都开启了学习web前端，本文就介绍web前端的基础内容。以上就是今天要讲的内容，本文仅仅简单介绍了js怎样实现小球运动，以上用到了DOM距离，分别为：元素的可视距离: tag.clientHeight,tag.clientWidth ，元素控件距离: tag.offsetHeight,tag.offsetWidth，被撑开的距离: tag.scrollHieght,tag.scrollWidth。.........
Js-动态边框容器触碰边缘弹回
keyuzhang的博客
04-16 709
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript" src="../recourse/jQuery/jquery-2.2.3.min.js"></scri...
js实现小球在页面规定的区域运动
10-15
主要为大家详细介绍了js控制小球在规定范围运动，碰到边界就改变运动方向，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js图片自由运动
whjwhja6的专栏
12-11 740
var wwidth, wheight;           var ydir = '++'; var xdir = '++'; var x = 1; var y = 1; function getwindowsize() { wwidth = document.body.clientWidth - 55;        wheight = document.body.c
原生JS实现多个小球碰撞反弹效果示例
10-18
在本文中，我们将详细解读如何利用原生JavaScript实现多个小球碰撞反弹的效果。通过分析实现小球移动、碰撞、反弹等动态效果所涉及的关键知识点，可以帮助理解并掌握相关技术。 **小球移动实现：** 要实现小球在...
html小球与边框碰撞反弹,通过JS如何实现多个小球碰撞反弹
weixin_29481259的博客
06-29 1310
这篇文章主要介绍了原生JS实现多个小球碰撞反弹效果,结合完整实例形式分析了javascript实现小球碰撞的相关数值计算、随机数生成、事件响应等操作技巧,需要的朋友可以参考下本文实例讲述了原生JS实现多个小球碰撞反弹效果。分享给大家供大家参考，具体如下：实现思路：小球的移动，是通过改变小球的left和top值来改变，坐标分别为(x,y)当x/y值加到最大，即加到父级的宽度或者高度时，使x值或者y值...
js碰壁反弹，小球碰撞，代码超级简单
最新发布
Zbz00720的博客
04-20 313
本次我们要来完成javascript中小球碰撞的效果，代码特别简单，让我们一起来看一下吧！碰壁反弹的逻辑并不复杂，完成这样效果的方法也是多种多样，这里也是给大家提供一个思路。小球移动并不困难，关键是在处理临界值，也就是小球移动到边界的逻辑处理，解决好临界值问题，这样类似的简单小逻辑，也就难不倒你了。
用js做一个方块 在网页窗口运动 遇到边角反弹
dizhan4240的博客
08-29 698
//css代码 <style> div{ width: 100px; height: 100px; background-color: brown; position: absolute; } </style> <...
js 实现 到边界反弹的漂浮图片
03-30
js 实现 到边界反弹的漂浮图片! 值得下载看看!资源免费,大家分享!!
js原生态标签云球形滚动特效特效代码
03-20
js原生态标签云球形滚动特效代码
纯原生 js 简易 实现 小球运动
bangeshengtang的博客
08-11 317
纯原生 js 简易 实现 小球运动
html5使用canvas实现小球碰撞反弹实例
雾里看花叹朦胧
12-27 6096
使用 html5 中的 canvas, 实现小球相互碰撞并反弹,反弹算法比较简单.index.html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bouncing balls</title> <link rel="stylesheet" href="style.css"> </he
js 实现小球的环绕移动
xuebinsunwumei的博客
12-07 679
html代码： <div id="box"> <div id="ball"></div> </div> css代码： #box { border: 5px solid red; width: 1000px; height: 300px; margin: 150px auto; position: relative; } #ball {
用js控制小球在规定范围运动，碰到边境就改变运动方向。
Lv_SFeng的博客
06-15 552
小球在页面规定的区域运动，碰到边界就改变运动方向。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小球运动</title> <style type="text/css"> #box { width: 600px; height: 300px; border: 1px solid red; positi
使用JavaScript实现小球自由落体运动
qq_64314976的博客
07-13 643
使用JavaScript实现小球自由落体运动
Html 球形滚动,HTML5/Canvas Matter.js 圆球掉落和滚动
weixin_34677764的博客
06-08 395
JavaScript语言：JaveScriptBabelCoffeeScript确定var canvas = {width: 700,height: 500}var Engine = Matter.Engine,World = Matter.World,Body = Matter.Body,Bodies = Matter.Bodies,Constraint = Matter.Constraint,...
Matter.js碰撞设置规则
weixin_34361881的博客
04-16 566
Matter是一套不错的js物理引擎，LayaAir内置后，变得更加好用 Matter相互碰撞提供了collisionFilter属性，支持三种属性，分别是 groupcategorymask 使用三种属性，就能设计出很复杂的碰撞关系 其中规则如下：第一种情况 在两个group相等的前提下如果任意group大于零，则两者始终碰撞，比如大...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值