h5+js随机拖动鼠标产生动画效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS+html5实现跟随鼠标移动而散开的粒子效果 - 【51RGB】</title>
<meta name="keywords" content="HTML5特效,canvas动画,粒子特效,鼠标动画特效,CSS3特效,网页特效" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<style>@charset "utf-8";
/*科e互联特效基本框架CSS*/
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
body>div{margin:0 auto}
div {text-align:left}
a img {border:0}
body { color: #333; text-align: center; font: 12px "宋体"; }
ul, ol, li {list-style-type:none;vertical-align:0}
a {outline-style:none;color:#535353;text-decoration:none}
a:hover { color: #D40000; text-decoration: none}
.clear{height:0; overflow:hidden; clear:both}
.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top, #ed1c24, #A51715);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}
.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top, #aa1317, #ed1c24);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
.cor_bs,.cor_bs:hover{color:#ffffff;}
.keBody{background:url(../images/bodyBg.jpg) repeat #333;}
.keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center; background:url(../images/bodyBg3.jpg) repeat-x bottom left; font-weight:normal}
.kePublic{background:#000; overflow:hidden; position:relative; height:550px;}
.keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; background:url(../images/bodyBg2.jpg) repeat-x top left; padding-bottom:25px}
.keTxtP{font-size:16px; color:#ffffff;}
.keUrl{color:#FFF; font-size:30px;}
.keUrl:hover{ text-decoration: underline; color: #FFF; }
.mKeBanner,.mKeBanner div{text-align:center;}
/*科e互联特效基本框架CSS结束，应用特效时，以上样式可删除*/
/* 效果CSS开始 */
#container{height:550px!important;}
/* 效果CSS结束 */</style>
</head>
<body class="keBody">
<h1 class="keTitle">JS+html5实现跟随鼠标移动而散开的粒子效果</h1>
<div class="kePublic">

<div >//素材家园- www.sucaijiayuan.com
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();
}
};

// ----------------------------------------
// Example
// ----------------------------------------

var MAX_PARTICLES = 280;
var COLOURS = [ '#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423' ];

var particles = [];
var pool = [];

var demo = Sketch.create({
container: document.getElementById( 'container' )
});

demo.setup = function() {

// Set off some initial particles.
var i, x, y;

for ( i = 0; i < 20; i++ ) {
x = ( demo.width * 0.5 ) + random( -100, 100 );
y = ( demo.height * 0.5 ) + random( -100, 100 );
demo.spawn( x, y );
}
};

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 );
}
};
</script>

<div class="clear"></div>
</div>

</body>
</html>