原生js实现弹动小球效果

本文实例为大家分享了JavaScript实现弹动小球效果展示的具体代码，供大家参考，具体内容如下

源码展示

<!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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js实现跟随鼠标移动的小球

    js实现跟随鼠标移动的小球

    本文实例为大家分享了js实现跟随鼠标移动的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>follow mouse</title> </head> <style type="text/css"> *{ margin: 0; padding:0; } #div1{width: 50px;height: 50px;background: red;

  • p5.js入门教程之小球动画示例代码

    一.运动的小球 本节将用p5.js做一个在屏幕上运动的小球. 思路是用变量记录小球的位置,然后在draw()函数里对其做出改变,由于draw()函数会不断地运行(频率为FPS,默认60帧/秒),所以小球便产生了运动. 代码如下: var x=0; function setup() { createCanvas(400, 400); } function draw() { background(220); //width和height是关键词,分别是Canvas的宽和高 x+=2; ellipse

  • JavaScript canvas实现跟随鼠标移动小球

    JavaScript canvas实现跟随鼠标移动小球

    本文实例为大家分享了js跟随鼠标移动小球的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> canvas{ border: 1px solid #000; } </style> </head> <body> <canvas

  • 用js实现小球的自由移动代码

    用js实现小球的自由移动代码

    正在学习javascript 的朋友可以把它当作小练习动手做一做.加强自己的动手编码能力. 参考代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>ggggg</title><link rel="stylesheet" type="text/css&qu

  • JavaScript实现小球沿正弦曲线运动

    JavaScript实现小球沿正弦曲线运动

    本文实例为大家分享了js实现小球沿正弦曲线运动的具体代码,供大家参考,具体内容如下 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .dot{ margin-top: 300px; position: absolute; width

  • 原生js实现移动小球（碰撞检测）

    原生js实现移动小球（碰撞检测）

    本文实例为大家分享了js实现移动小球的具体代码,供大家参考,具体内容如下 </head> <style> *{margin: 0; padding:0;} #main{margin: 0px auto;position: relative;} #main div{overflow: hidden;position: absolute;width: 50px;height: 50px;opacity: 0.5; -moz-border-radius: 50%;-webkit-bord

  • 原生js实现弹跳小球

    突发奇想,写了个小球来回弹跳的案例,供大家参考,具体内容如下 主要就是利用了margin-left / top 值进行位移,当然,也可以使用定位去做. 本案例所用到的有: DOM元素获取 DOM样式操作 .offsetWidth 获取元素宽度 .offsetHeight 获取元素高度 setInterval() 定时器 上代码 整体使用原生js <style> //style样式 * { margin: 0; padding: 0; } #box { width: 500px; height:

  • JavaScript+canvas实现框内跳动小球

    JavaScript+canvas实现框内跳动小球

    本文实例为大家分享了JavaScript+canvas实现框内跳动小球的具体代码,供大家参考,具体内容如下 效果如下: 思路: 1.制定画布,确定好坐标2.绘制出圆形小球3.给圆一个原始坐标,xy轴的速度4.每20毫秒刷新一次,达到变化的目的5.判断边缘 全部代码及释义如下: <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <m

  • JavaScript结合Canvas绘画画运动小球

    JavaScript结合Canvas绘画画运动小球

    目录 1.实现思路 2.静态效果 3.总结 前言: canvas是HTML5新增的元素,也被称为画布,可以结合javascript实现绘制各种图形,制作各种炫酷的动画效果,现在我们也来使用canvas画随机运动小球. 1.实现思路 首先为了达到我们想要的效果,可以先创建一个构造函数. 给构造函数添加对应的属性和方法. 实例化出多个对象,并且保存在数组中. 遍历每个对象,实现画圆. 间隔修改每个球的x,y值. 先准备画布确定对应的宽高: <canvas id="canvas" wi

  • js实现小球在页面规定的区域运动

    本文实例为大家分享了js控制小球在规定范围运动的具体代码,供大家参考,具体内容如下 小球在页面规定的区域运动,碰到边界就改变运动方向. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小球运动</title> <style type="text/css"> #box { width: 600px; height:

随机推荐