原生js实现弹动的小球

最新推荐文章于 2021-09-11 11:03:13 发布

Mr.王征

最新推荐文章于 2021-09-11 11:03:13 发布

阅读量1.3k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js css css3 动画

本文链接：https://blog.youkuaiyun.com/wangzhneg123/article/details/87892777

js 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用原生JavaScript实现的弹动小球动画效果。通过创建多个带有随机颜色的圆形div元素，并利用requestAnimationFrame进行连续更新位置，实现了小球在浏览器窗口内反弹的效果。代码中详细展示了如何计算小球的位置、处理边界碰撞以及改变小球颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

弹动小球效果展示

源码展示

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹弹球（原生js）</title>

<style>
* {
	margin:0;
	padding:0;
	font-family:Microsoft YaHei,serif;
}
li {
	list-style:none;
}
.ball {
	position:absolute;
	top:0;
	left:0;
	width:100px;
	height:100px;
	background:pink;
	border-radius:50%;
}
</style>
</head>
<body>
<div></div>

<script>
  play(10);

  function play(num) {
      //生成num个div
      for (var i = 0; i < num; i++) {
          var Div = document.createElement("div");
          Div.className = "ball";
          Div.leftVal = 3 + i; //预存每个球的初始速度
          Div.topVal = 3 + i; //预存每个球的初始速度
          Div.style.backgroundColor = randomC();
          document.body.appendChild(Div);
      }

      var aBall = document.querySelectorAll(".ball");
      maxTop = document.documentElement.clientHeight - aBall[0].clientHeight, //获取top的最大值
          maxLeft = document.documentElement.clientWidth - aBall[0].clientWidth; //获取left的最大值

      window.onresize = function() {
          maxTop = document.documentElement.clientHeight - aBall[0].clientHeight; //获取top的最大值
          maxLeft = document.documentElement.clientWidth - aBall[0].clientWidth; //
      };

      auto();

      function auto() {
          for (var i = 0; i < num; i++) {
              var Ball = aBall[i],
                  startL = Ball.offsetLeft, //取每个球的初始left和TOP值
                  startT = Ball.offsetTop, //取每个球的初始left和TOP值
                  Left = startL + Ball.leftVal, //改变，每个球的left和top值
                  Top = startT + Ball.topVal; //改变，每个球的left和top值


              if (Left >= maxLeft || Left <= 0) {
                  Left = Math.min(Left, maxLeft); //限制Left的最大值
                  Left = Math.max(Left, 0); //限制最小值

                  Ball.leftVal = -Ball.leftVal;
                  Ball.style.backgroundColor = randomC();

              }
              if (Top >= maxTop || Top <= 0) {
                  Ball.topVal = -Ball.topVal;

                  Top = Math.min(Top, maxTop); //限制Left的最大值
                  Top = Math.max(Top, 0); //限制最小值
                  Ball.style.backgroundColor = randomC();
              }


              Ball.style.top = Top + "px";
              Ball.style.left = Left + "px";
          }
          requestAnimationFrame(auto)

      }
      // rgb(0-255)
      function randomC() {
          var r = Math.floor(Math.random() * 256),
              g = Math.floor(Math.random() * 256),
              b = Math.floor(Math.random() * 256);
          return "rgb(" + r + "," + g + "," + b + ")";
      }

  }
</script>

</body>
</html>