1.   阿里云服务器1888元代金券领取
  2.   本网站所有源码包解压密码:www.youhutong.com
登录  帮助问答

JS生成弹性小球碰撞工具插件

小川 特效组件
郑重声明:
  本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途,否则后果请用户自负,下载后请24小时内删除。 本站所有内容均不能保证其完整性,不提供任何技术支持,不能接受请勿购买或下载,如需完整程序,请去其官方购买正版使用。
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com

演示部分截图

000.png

资源描述

JS生成弹性小球碰撞工具插件

使用说明:

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();

参数说明:

1、容器参数  new BallBox(‘container’,opts);

opts:{width:num,height:num}//没有边线和padding的时候可不写。有的情况下需要把容器真实宽高填进去。

2、小球参数 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);//重设小球透明度
 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com

转载请注明来源地址:小川编程 » https://www.youhutong.com/index.php/article/index/773.html


  1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途,下载后请24小时内删除。
  2、本站所有内容均不能保证其完整性,不能接受请勿购买或下载,如需完整程序,请去其官方购买正版使用
  3、本站联系方式Email:admin@youhutong.com ,收到邮件会第一时间处理。
  4、如侵犯到任何版权问题,请立即告知本站(立即在线告知),本站将及时删除并致以最深的歉意
( 0 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情