jQuery实现动态粒子效果

第jQuery实现动态粒子效果本文实例为大家分享了jQuery实现动态粒子效果的具体代码，供大家参考，具体内容如下

效果图

代码

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

scriptsrc="/jquery/1.10.2/jquery.min.js"/script

divid="jsi-particle-container"/div

style

html,

body{

width:100%;

height:100%;

margin:0;

padding:0;

overflow:hidden;

.container{

width:100％;

height:100%;

margin:0;

padding:0;

background-color:#000000;

/style

/head

body

script

varRENDERER={

PARTICLE_COUNT:1000,

PARTICLE_RADIUS:1,

MAX_ROTATION_ANGLE:Math.PI/60,

TRANSLATION_COUNT:500,

init:function(strategy){

this.setParameters(strategy);

this.createParticles();

this.setupFigure();

this.reconstructMethod();

this.bindEvent();

this.drawFigure();

setParameters:function(strategy){

this.$window=$(window);

this.$container=$('#jsi-particle-container');

this.width=this.$container.width();

this.height=this.$container.height();

this.$canvas=$('canvas/').attr({

width:this.width,

height:this.height

}).appendTo(this.$container);

this.context=this.$canvas.get(0).getContext('2d');

this.center={

x:this.width/2,

y:this.height/2

this.rotationX=this.MAX_ROTATION_ANGLE;

this.rotationY=this.MAX_ROTATION_ANGLE;

this.strategyIndex=0;

this.translationCount=0;

this.theta=0;

this.strategies=strategy.getStrategies();

this.particles=[];

createParticles:function(){

for(vari=0;ithis.PARTICLE_COUNT;i++){

this.particles.push(newPARTICLE(this.center));

reconstructMethod:function(){

this.setupFigure=this.setupFigure.bind(this);

this.drawFigure=this.drawFigure.bind(this);

this.changeAngle=this.changeAngle.bind(this);

bindEvent:function(){

this.$container.on('click',this.setupFigure);

this.$container.on('mousemove',this.changeAngle);

changeAngle:function(event){

varoffset=this.$container.offset(),

x=event.clientX-offset.left+this.$window.scrollLeft(),

y=event.clientY-offset.top+this.$window.scrollTop();

this.rotationX=(this.center.y-y)/this.center.y*this.MAX_ROTATION_ANGLE;

this.rotationY=(this.center.x-x)/this.center.x*this.MAX_ROTATION_ANGLE;

setupFigure:function(){

for(vari=0,length=this.particles.length;ilength;i++){

this.particles[i].setAxis(this.strategies[this.strategyIndex]());

if(++this.strategyIndex==this.strategies.length){

this.strategyIndex=0;

this.translationCount=0;

drawFigure:function(){

requestAnimationFrame(this.drawFigure);

this.context.fillStyle='rgba(0,0,0,0.2)';

this.context.fillRect(0,0,this.width,this.height);

for(vari=0,length=this.particles.length;ilength;i++){

varaxis=this.particles[i].getAxis2D(this.theta);

this.context.beginPath();

this.context.fillStyle=axis.color;

this.context.arc(axis.x,axis.y,this.PARTICLE_RADIUS,0,Math.PI*2,false);

this.context.fill();

this.theta++;

this.theta%=360;

for(vari=0,length=this.particles.length;ilength;i++){

this.particles[i].rotateX(this.rotationX);

this.particles[i].rotateY(this.rotationY);

this.translationCount++;

this.translationCount%=this.TRANSLATION_COUNT;

if(this.translationCount==0){

this.setupFigure();

varSTRATEGY={

SCATTER_RADIUS:150,

CONE_ASPECT_RATIO:1.5,

RING_COUNT:5,

getStrategies:function(){

varstrategies=[];

for(variinthis){

if(this[i]==arguments.callee||typeofthis[i]!='function'){

continue;

strategies.push(this[i].bind(this));

returnstrategies;

createSphere:function(){

varcosTheta=Math.random()*2-1,

sinTheta=Math.sqrt(1-cosTheta*cosTheta),

phi=Math.random()*2*Math.PI;

return{

x:this.SCATTER_RADIUS*sinTheta*Math.cos(phi),

y:this.SCATTER_RADIUS*sinTheta*Math.sin(phi),

z:this.SCATTER_RADIUS*cosTheta,

hue:Math.round(phi/Math.PI*30)

createTorus:function(){

vartheta=Math.random()*Math.PI*2,

x=this.SCATTER_RADIUS+this.SCATTER_RADIUS/6*Math.cos(theta),

y=this.SCATTER_RADIUS/6*Math.sin(theta),

phi=Math.random()*Math.PI*2;

return{

x:x*Math.cos(phi),

y:y,

z:x*Math.sin(phi),

hue:Math.round(phi/Math.PI*30)

createCone:function(){

varstatus=Math.random()1/3,

phi=Math.random()*Math.PI*2,

rate=Math.tan(30/180*Math.PI)/this.CONE_ASPECT_RATIO;

if(status){

y=this.SCATTER_RADIUS*(1-Math.random()*2);

x=(this.SCATTER_RADIUS-y)*rate;

}else{

y=-this.SCATTER_RADIUS;

x=this.SCATTER_RADIUS*2*rate*Math.random();

return{

x:x*Math.cos(phi),

y:y,

z:x*Math.sin(phi),

hue:Math.round(phi/Math.PI*30)

createVase:function(){

vartheta=Math.random()*Math.PI,

x=Math.abs(this.SCATTER_RADIUS*Math.cos(theta)/2)+this.SCATTER_RADIUS/8,

y=this.SCATTER_RADIUS*Math.cos(theta)*1.2,

phi=Math.random()*Math.PI*2;

return{

x:x*Math.cos(phi),

y:y,

z:x*Math.sin(phi),

hue:Math.round(phi/Math.PI*30)

varPARTICLE=function(center){

this.center=center;

this.init();

PARTICLE.prototype={

SPRING:0.01,

FRICTION:0.9,

FOCUS_POSITION:300,

COLOR:'hsl(%hue,100%,70%)',

init:function(){

this.x=0;

this.y=0;

this.z=0;

this.vx=0;

this.vy=0;

this.vz=0;

this.color;

setAxis:function(axis){

this.translating=true;

this.nextX=axis.x;

this.nextY=axis.y;

this.nextZ=axis.z;

this.hue=axis.hue;

rotateX:function(angle){

varsin=Math.sin(angle),

cos=Math.cos(angle),

nextY=this.nextY*cos-this.nextZ*sin,

nextZ=this.nextZ*cos+this.nextY*sin,

y=this.y*cos-this.z*sin,

z=this.z*cos+this.y*sin;

this.nextY=nextY;

this.nextZ=nextZ;

this.y=y;

this.z=z;

rotateY:function(angle){

varsin=Math.sin(angle),

cos=Math.cos(angle),

nextX=this.nextX*cos-this.nextZ*sin,

nextZ=this.nextZ*cos+this.nextX*sin,

x=this.x*cos-this.z*sin,

z=this.z*cos+this.x*sin;

this.nextX=nextX;

this.nextZ=nextZ;

this.x=x;

this.z=z;

rotateZ:function(angle){

varsin=Math.sin(angle),

cos=Math.cos(angle),

nextX=this.nextX*cos-this.nextY*sin,

nextY=this.nextY*cos+this.nextX*sin,

x=this.x*cos-this.y*sin,

y=this.y*cos+this.x*sin;

this.nextX=nextX;

this.nextY=nextY;

this.x=x;

this.y=y;

getAx