素材8网-专注前端素材！
来源：https://www.htmlsucai.com/38289.html

气泡物理碰撞效果

  • 2157
  • 1
  • 0


使用方法说明

1.此插件纯原生js编写，使用时引入此collision.js即可。

2.生成容器，假设现有一个id为container的盒子做容器。

  1. var oB=new BallBox(‘container’);
复制代码

注：容器必须是有宽高的定位元素。尽量不要有边线。

3.生成小球

  1. var ball=new Ball();
复制代码

4.把小球放入容器

  1. oB.addBall(ball);
复制代码

5.调用容器的ballRun方法，让小球开始运动。注意：此运动是完全弹性碰撞，不会损失能量。

  1. oB.ballRun();
复制代码
参数说明

容器参数

  1. new BallBox(‘container’， opts);
  2. opts: {
  3.     width: num,
  4.     height: num
  5. } //没有边线和padding的时候可不写。有的情况下需要把容器真实宽高填进去。
  6. 小球参数 new Ball(opts);
  7. opts: {
  8.         e: 小球DOM元素 / 原生对象， 可填入页面DOM， 不写则生成新DIV DOM,
  9.         b: 小球半径 默认30;包含边
  10.         c: 小球背景颜色 / 图片， 默认 'pink'
  11.         borderWidth: 边线宽度 默认0
  12.         borderColor: 边线颜色 默认 #000
  13.      x:小球中心点的横坐标 默认为半径
  14.      y:小球中心点的纵坐标 默认为半径
  15.      sx:小球在x轴方向速度每30ms，默认3
  16.      sy:小球在y轴方向速度每30ms，默认3
  17.      m:小球的质量，默认b/30;
  18.      html:小球内部的内容，不填则不会改变DOM本身的内容。
  19.      fontSize:字体大小，默认12;
  20.      opa:小球透明度，默认1；
  21.      callBack:function  碰撞时的回掉函数，参数为碰撞的总次数，方法中this指向此球对象
  22.      }
  23.       
  24. */
复制代码

小球方法：

  1. setB(num)//重新设置小球半径
  2. setC(str);//重新设置小球背景颜色/图片
  3. setBorderWidth(n);//重新设置小球边线宽度
  4. setBorderColor(str);//重新设置边线颜色
  5. setM(n);//重设小球质量,如果不给参数，则按照半径重新默认质量
  6. setHTML(str);//重设小球内容
  7. setOpa(n);//重设小球透明度
复制代码

本素材被以下收藏专辑推荐:

相关素材
气泡物理碰撞效果
  • 陈鳄北 刚刚下载了一个素材
  • 杨双源 刚刚下载了一个素材
  • dy_apollo_kbb 刚刚下载了一个素材
  • 想要魔法的姮砸 刚刚下载了一个素材
  • dy_steven_a76 刚刚下载了一个素材
  • 妮妮爹地鹏 刚刚下载了一个素材
  • xs12 刚刚下载了一个素材
  • 子成君 刚刚下载了一个素材
  • sszh 刚刚下载了一个素材
  • 用户3212177423352 刚刚下载了一个素材
  • renshengdemi 刚刚下载了一个素材
  • 绿皮书生活 刚刚下载了一个素材
  • 路润帆Teemo 刚刚下载了一个素材
  • shenyexiaoye 刚刚下载了一个素材
  • 玛瑞特试验设备工程师 刚刚下载了一个素材
分享者：
分享者头像
小编
热门素材推荐
HTML素材网，HTML5模板，网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2026  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5 鲁公网安备37060202001967号
返回顶部返回顶部
发布主题