小球碰撞(完全弹性碰撞)

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

小球碰撞(完全弹性碰撞) ie兼容10

更新时间: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折纸效果

ORIDOMI实现的jquery折纸效果效果非常棒
  动画效果
 11771  53

苹果滑动解锁动画效果

苹果滑动解锁动画效果slide-to-unlock
  动画效果
 16299  13

文字漂浮效果

点击按钮后,文字随机浮动,再次点击回到原位。
  动画效果
 11481  99

CSS3提交按钮动画特效

这个提交按钮效果有两组动画:当屏幕大于800px的时候是一个动画效果,当屏幕小于800像素的时候是另一种动画效果。缩放你的浏览器看看不同的提交按钮动画效果吧!
  动画效果
 12274  89

讨论这个项目(14)回答他人问题或分享插件使用方法奖励jQ币

    ? 倚栏ㄋ? 听风雨 0
    2017/9/7 9:36:00

    老铁呀 花金币了 如何小球撞得时候字不变呀,每个字都是固定进去的数据

        kmh02280
        2017/9/7 23:08:45

        应该是你的回掉函数没写好。每次碰撞都会触发

    回复
    love萌99 0
    2017/8/23 16:15:14

    你好,请问collision.js中小球的原型方法ballstop怎么用的?  我想要每1秒删除一个小球,div可以移除,但是定时器移除不掉,页面执行时间长了特别卡

        love萌990
        2017/8/23 16:16:10

        额。。怎么提交了这么条   刚一直刷新不出来页面。。

    回复
    0
    2017/7/21 13:00:50
    请问,如何实现点击小球跳转到新页面?刚刚买了金币。
        kmh02280
        2017/7/21 14:39:16
        可以自己写个小球的盒子,用a标签。
        kmh02281
        2017/7/21 14:40:43
        opts参数 e: 小球DOM元素 / 原生对象, 可填入页面DOM, 不写则生成新DIV DOM,
        0
        2017/7/24 10:00:01
        'html':'<a href="'+hrefList[i]+'" style="color:'+ generateColor()+'">'+says[i]+'</a>',您好我现在是这样写的,但是这样子体验特别好,能不能再详细一点啊。
        kmh02281
        2017/7/24 16:58:28

        方法一:

        '<a href="'+hrefList[i]+'" style="color:'+ generateColor()+'">'+says[i]+'</a>'

        写到html里,这里的html什么都不写,e属性里写:document.getElementById(这个a的id);方法而:你写的html加上样式,如下

        '<a href="'+hrefList[i]+'" style="color:'+ generateColor()+';display:block;width:100%;height:100%;">'+says[i]+'</a>'
        kmh02280
        2017/7/24 16:59:00

        那个是方法二,不是而,打错字了

    回复
    0
    2017/7/21 11:52:39

    为什么不是免费的啊。心塞。

    回复
    SiriBen 0
    2017/6/23 11:30:07

    东西确实不错的,只不没有想出在哪里能应用上,估计只有做网页游戏的才用得着吧?

    回复
    学习jq 0
    2017/6/23 9:54:00

    厉害了,我的弟

        kmh02280
        2017/6/23 15:27:58

        我自己都发现两个BUG了。有空我再改改。。看我的插件,有个魔方插件很值得下载!

    回复
取消回复