小球碰撞（完全弹性碰撞）

所属分类：其他-动画效果

48135 468 查看评论 (28)

分享到微信朋友圈

查看演示立即下载

插件描述：给自己主页目录用这个的，顺便传上来。

更新时间：2017/6/28 上午10:32:32

更新说明：

1. 更新了碰撞方法。解决了擦边碰撞不正常的情况。

2. 更新了碰撞回掉函数的调用情况。避免了刚出现小球时如果重叠一直调用的情况。

使用方法说明

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

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

var oB=new BallBox(‘container’);

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

3.生成小球

var ball=new Ball();

4.把小球放入容器

oB.addBall(ball);

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

oB.ballRun();

over

参数说明

容器参数

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

小球方法：

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

jQuery简单的相册墙效果

H5下拉刷新上拉加载更多