【实例演示】
【程序源码】
/**
* 小球类 Ball
* @param {number} diameter 直径
*/
var Ball = function(diameter, x, y, vx, vy) {
var ball = document.createElement('div');
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
ball.style.width = ball.style.height = diameter + 'px';
ball.style.backgroundColor = 'rgb('+r+', '+g+', '+b+')';
ball.style.left = x + 'px'; ball.style.top = y + 'px'; ball.vx = vx; ball.vy = vy; ball.style.position = 'absolute';
return ball;
};
function T$(id) { return document.getElementById(id) }
/**
* 喷泉主类 Fountain
* @param {string} 舞台ID
* @param {number} 水滴数目
* @param {number} 重力加速度
*/
var Fountain = function(stage, count, gravity) {
this.stage = T$(stage);
this.count = count;
this.gravity = gravity;
this.timer = null;
};
Fountain.prototype = {
constructor: Fountain,
initialize: function() {
// 生成一定数目的随机颜色小球
var self = this, count = self.count, j = 0,
frag = document.createDocumentFragment(),
stage = self.stage, gravity = self.gravity;
// 设置小球参数(直径, 半径, 舞台位置)
var diameter = 4, radius = diameter / 2, x = stage.clientWidth / 2, y = stage.clientHeight;
var balls = new Array();
for (; j < count; j++) {
var ball = new Ball(diameter, x, y, Math.random() * 4 - 1, Math.random() * -10 - 10);
balls[j] = ball;
frag.appendChild(ball);
}
T$('fountain').innerHTML = '';
T$('fountain').appendChild(frag);
clearTimeout(self.timer);
function Run() {
for (var i = 0, len = balls.length; i < len; i++) {
var ball = balls[i];
ball.vy += gravity;
ball.style.left = (ball.offsetLeft + ball.vx) + 'px';
ball.style.top = (ball.offsetTop + ball.vy) + 'px';
// 边界检测
if (ball.offsetLeft - radius > x || ball.offsetLeft + radius < 0
|| ball.offsetTop - radius > y || ball.offsetTop + radius < 0)
{
ball.style.left = x + 'px';
ball.style.top = y + 'px';
ball.vx = Math.random() * 4 - 1;
ball.vy = Math.random() * -10 - 10;
}
}
self.timer = setTimeout(Run, 10);
}
Run();
}
};
// 在舞台中央生成30个彩色水滴. 重力加速度为.5
var fountain = new Fountain('stage', 30, 0.5);
T$('run').onclick = function() {
fountain.initialize();
}
T$('stop').onclick = function() {
clearTimeout(fountain.timer);
}
* 小球类 Ball
* @param {number} diameter 直径
*/
var Ball = function(diameter, x, y, vx, vy) {
var ball = document.createElement('div');
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
ball.style.width = ball.style.height = diameter + 'px';
ball.style.backgroundColor = 'rgb('+r+', '+g+', '+b+')';
ball.style.left = x + 'px'; ball.style.top = y + 'px'; ball.vx = vx; ball.vy = vy; ball.style.position = 'absolute';
return ball;
};
function T$(id) { return document.getElementById(id) }
/**
* 喷泉主类 Fountain
* @param {string} 舞台ID
* @param {number} 水滴数目
* @param {number} 重力加速度
*/
var Fountain = function(stage, count, gravity) {
this.stage = T$(stage);
this.count = count;
this.gravity = gravity;
this.timer = null;
};
Fountain.prototype = {
constructor: Fountain,
initialize: function() {
// 生成一定数目的随机颜色小球
var self = this, count = self.count, j = 0,
frag = document.createDocumentFragment(),
stage = self.stage, gravity = self.gravity;
// 设置小球参数(直径, 半径, 舞台位置)
var diameter = 4, radius = diameter / 2, x = stage.clientWidth / 2, y = stage.clientHeight;
var balls = new Array();
for (; j < count; j++) {
var ball = new Ball(diameter, x, y, Math.random() * 4 - 1, Math.random() * -10 - 10);
balls[j] = ball;
frag.appendChild(ball);
}
T$('fountain').innerHTML = '';
T$('fountain').appendChild(frag);
clearTimeout(self.timer);
function Run() {
for (var i = 0, len = balls.length; i < len; i++) {
var ball = balls[i];
ball.vy += gravity;
ball.style.left = (ball.offsetLeft + ball.vx) + 'px';
ball.style.top = (ball.offsetTop + ball.vy) + 'px';
// 边界检测
if (ball.offsetLeft - radius > x || ball.offsetLeft + radius < 0
|| ball.offsetTop - radius > y || ball.offsetTop + radius < 0)
{
ball.style.left = x + 'px';
ball.style.top = y + 'px';
ball.vx = Math.random() * 4 - 1;
ball.vy = Math.random() * -10 - 10;
}
}
self.timer = setTimeout(Run, 10);
}
Run();
}
};
// 在舞台中央生成30个彩色水滴. 重力加速度为.5
var fountain = new Fountain('stage', 30, 0.5);
T$('run').onclick = function() {
fountain.initialize();
}
T$('stop').onclick = function() {
clearTimeout(fountain.timer);
}
【源码下载】