鼠标移动添加七彩泡泡效果

查看演示

实现此效果只需要两步

一. 引入js

二 . 给哪个div实现此效果（引入实现效果的js）

1 . 下载插件（下载）

2 . 在工程引入js（路径引入正确就行，不同的框架引入方式不同，我这个是Spring boo框架t的引入方式）

3.在<div id="main"></div>这个div引入泡泡功能，则要引入js , 这个js里面的getElementById("main")要对应才能实现效果

$(document).ready(function(){
	
function Particle(x, y, radius) {
	this.init(x, y, radius);
}
Particle.prototype = {
	init : function(x, y, radius) {
		this.alive = true;
		this.radius = radius || 10;
		this.wander = 0.15;
		this.theta = random(TWO_PI);
		this.drag = 0.92;
		this.color = '#fff';
		this.x = x || 0.0;
		this.y = y || 0.0;
		this.vx = 0.0;
		this.vy = 0.0;
	},
	move : function() {
		this.x += this.vx;
		this.y += this.vy;
		this.vx *= this.drag;
		this.vy *= this.drag;
		this.theta += random(-0.5, 0.5) * this.wander;
		this.vx += sin(this.theta) * 0.1;
		this.vy += cos(this.theta) * 0.1;
		this.radius *= 0.96;
		this.alive = this.radius > 0.5;
	},
	draw : function(ctx) {
		ctx.beginPath();
		ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);
		ctx.fillStyle = this.color;
		ctx.fill();
	}
};

var MAX_PARTICLES = 280;
var COLOURS = [ '#0CF', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900',
		'#FF4E50', '#F9D423' ,'green','red','blue'];
var particles = [];
var pool = [];
var demo = Sketch.create({
	container : document.getElementById('main')
});
demo.setup = function() {
	var i, x, y;

	x = (demo.width * 0.3) + random(-100, 100);
	y = (demo.height * 0.3) + random(-100, 100);
	demo.spawn(0, 999);

};
demo.spawn = function(x, y) {
	if (particles.length >= MAX_PARTICLES)
		pool.push(particles.shift());
	particle = pool.length ? pool.pop() : new Particle();
	particle.init(x, y, random(5, 40));
	particle.wander = random(0.5, 2.0);
	particle.color = random(COLOURS);
	particle.drag = random(0.9, 0.99);
	theta = random(TWO_PI);
	force = random(2, 8);
	particle.vx = sin(theta) * force;
	particle.vy = cos(theta) * force;
	particles.push(particle);
};
demo.update = function() {
	var i, particle;
	for (i = particles.length - 1; i >= 0; i--) {
		particle = particles[i];
		if (particle.alive)
			particle.move();
		else
			pool.push(particles.splice(i, 1)[0]);
	}
};
demo.draw = function() {
	demo.globalCompositeOperation = 'lighter';
	for ( var i = particles.length - 1; i >= 0; i--) {
		particles[i].draw(demo);
	}
};
demo.mousemove = function() {
	var particle, theta, force, touch, max, i, j, n;
	for (i = 0, n = demo.touches.length; i < n; i++) {
		touch = demo.touches[i], max = random(1, 4);
		for (j = 0; j < max; j++) {
			demo.spawn(touch.x, touch.y);
		}
	}
};

});