js实现泡泡球体粒子碰撞物理效果动画代码
代码语言:html
所属分类:动画
代码描述:js实现泡泡球体粒子碰撞物理效果动画代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style type="text/css"> body { margin: 0; padding: 0; text-align: center; } #screen { width: 800px; height: 640px; position: relative; background: #ccccff; margin: 0 auto; vertical-align: bottom } #inner { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } #screen p { color: white; font: bold 14px; } .one { background: url('//repo.bfw.wiki/bfwrepo/image/5ee066dfc258a.png') no-repeat; background-size: 100% auto; } .two { background: url('//repo.bfw.wiki/bfwrepo/image/5ee066dfc258a.png') no-repeat; background-size: auto 100%; } .three { background: url('//repo.bfw.wiki/bfwrepo/image/5ee066f78ffb9.png') no-repeat; background-size: auto 100%; } .four { background: url('//repo.bfw.wiki/bfwrepo/image/5ee066f78ffb9.png') no-repeat; background-size: auto 100%; } .five { background: url('//repo.bfw.wiki/bfwrepo/image/5ee067089ab98.png') no-repeat; background-size: auto 100%; } .six { background: url('//repo.bfw.wiki/bfwrepo/image/5ee067089ab98.png') no-repeat; background-size: auto 100%; } .seven { background: url('//repo.bfw.wiki/bfwrepo/image/5ee066f78ffb9.png') no-repeat; background-size: auto 100%; } .eight { background: url('//repo.bfw.wiki/bfwrepo/image/5ee066f78ffb9.png') no-repeat; background-size: auto 100%; } .nine { background: url('//repo.bfw.wiki/bfwrepo/image/5ee067089ab98.png') no-repeat; background-size: auto 100%; } .ten { background: url('//repo.bfw.wiki/bfwrepo/image/5ee067089ab98.png') no-repeat; background-size: auto 100%; } </style> </head> <body> <div id="screen"> <div id="inner"> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> <div class="five"></div> <div class="six"></div> <div class="seven"></div> <div class="eight"></div> <div class="nine"></div> <div class="ten"></div> </div> </div> <input type="button" id="start" value="start"> <input type="button" id="stop" value="stop"> <br><br><br> <script> var getFlag = function (id) { return document.getElementById(id); //获取元素引用 } var extend = function(des, src) { for (p in src) { des[p] = src[p]; } return des; } var clss = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten']; var Ball = function (diameter, classn) { var ball = document.createElement("div"); ball.className = classn; with(ball.style) { width = height = diameter+'px'; position = 'absolute'; } return ball; } var Screen = function (cid, config) { //先创建类的属性 var self = this; if (!(self instanceof Screen)) { return new Screen(cid, config) } config = extend(Screen.Config, config) //configj是extend类的实例 self.container=getFlag(cid); //窗口对象 self.container = getFlag(cid); self.ballsnum = config.ballsnum; self.diameter = 80; //球的直径 self.radius = self.diameter/2; self.spring = config.spring; //球相碰后的反弹力 self.bounce = config.bounce; //球碰到窗口边界后的反弹力 self.gravity = config.gravity; //球的重力 self.balls = []; //把创建的球置于该数组变量 self.timer = null; //调用函数产生的时间id self.L_bound = 0; //container的边界 self.R_bound = self.container.clientWidth; //document.documentElement.clientWidth || document.body.clientWidth 兼容性 self.T_bound = 0; self.B_bound = self.container.clientHeight; }; Screen.Config = { //为属性赋初值 ballsnum: 10, spring: 0.8, bounce: -0.9, gravity: 0.05 }; Screen.prototype = { initialize: function () { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0