win10 wdatp

前沿拓展：

1、鼠標(biāo)點(diǎn)擊彈出愛心

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<!– 網(wǎng)頁鼠標(biāo)點(diǎn)擊**（愛心） –>
<script type="text/javascript">
! function (e, t, a) {
function r() {
for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[
e].y–, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +
"px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e]
.scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
requestAnimationFrame(r)
}

function n() {
var t = "function" == typeof e.onclick && e.onclick;
e.onclick = function (e) {
t && t(), o(e)
}
}

function o(e) {
var a = t.createElement("div");
a.className = "heart", s.push({
el: a,
x: e.clientX – 5,
y: e.clientY – 5,
scale: 1,
alpha: 1,
color: c()
}), t.body.appendChild(a)
}

function i(e) {
var a = t.createElement("style");
a.type = "text/css";
try {
a.appendChild(t.createTextNode(e))
} catch (t) {
a.styleSheet.cssText = e
}
t.getElement**yTagName("head")[0].appendChild(a)
}

</html>2、鼠標(biāo)點(diǎn)擊彈出文字

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<script>
(function () {
var a_idx = 0;
window.onclick = function (event) {
var a = new Array("?富強(qiáng)?", "?民主?", "?文明?", "?和諧?", "?自由?", "?平等?", "?公正?", "?法治?", "?愛國?",
"?敬業(yè)?", "?誠信?", "?友善?");

var heart = document.createElement("b"); //創(chuàng)建b元素
heart.onselectstart = new Function('event.returnValue=false'); //防止拖動(dòng)

document.body.appendChild(heart).innerHTML = a[a_idx]; //將b元素添加到頁面上
a_idx = (a_idx + 1) % a.length;
heart.style.cssText = "position: fixed;left:-100%;"; //給p元素設(shè)置樣式

var f = 16, // 字體大小
x = event.clientX – f / 2, // 橫坐標(biāo)
y = event.clientY – f, // 縱坐標(biāo)
c = randomColor(), // 隨機(jī)顏色
a = 1, // 透明度
s = 1.2; // 放大縮小

var timer = setInterval(function () { //添加定時(shí)器
if (a <= 0) {
document.body.removeChild(heart);
clearInterval(timer);
} else {
heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" +
c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" +
s + ");";

y–;
a -= 0.016;
s += 0.002;
}
}, 15)

}
// 隨機(jī)顏色
function randomColor() {

return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math
.random() * 255)) + ")";

}
}());
</script>
</body>

</html>3、鼠標(biāo)點(diǎn)擊彈出煙花波紋

</head>
<body>
<script>
function clickEffect() {
let balls = [];
let longPressed = false;
let longPress;
let multiplier = 0;
let width, height;
let origin;
let normal;
let ctx;
const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
const pointer = document.createElement("span");
pointer.classList.add("pointer");
document.body.appendChild(pointer);

if (canvas.getContext && window.addEventListener) {
ctx = canvas.getContext("2d");
updateSize();
window.addEventListener('resize', updateSize, false);
loop();
window.addEventListener("mousedown", function(e) {
pushBalls(randBetween(10, 20), e.clientX, e.clientY);
document.body.classList.add("is-pressed");
longPress = setTimeout(function(){
document.body.classList.add("is-longpress");
longPressed = true;
}, 500);
}, false);
window.addEventListener("mouseup", function(e) {
clearInterval(longPress);
if (longPressed == true) {
document.body.classList.remove("is-longpress");
pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
longPressed = false;
}
document.body.classList.remove("is-pressed");
}, false);
window.addEventListener("mousemove", function(e) {
let x = e.clientX;
let y = e.clientY;
pointer.style.top = y + "px";
pointer.style.left = x + "px";
}, false);
} else {
console.log("canvas or addEventListener is unsupported!");
}

function pushBalls(count = 1, x = origin.x, y = origin.y) {
for (let i = 0; i < count; i++) {
balls.push(new Ball(x, y));
}
}

function randBetween(min, max) {
return Math.floor(Math.random() * max) + min;
}

<!DOCTYPE html>
<html lang="en">

<head>

</head>

<body>
<span class="js-cursor-container"></span>
<script>
(function fairyDustCursor() {

var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
var width = window.innerWidth;
var height = window.innerHeight;
var cursor = { x: width / 2, y: width / 2 };
var particles = [];

function init() {
bindEvents();
loop();
}

// Bind events that are needed
function bindEvents() {
document.addEventListener('mousemove', onMouseMove);
window.addEventListener('resize', onWindowResize);
}

function onWindowResize(e) {
width = window.innerWidth;
height = window.innerHeight;
}

function onMouseMove(e) {
cursor.x = e.clientX;
cursor.y = e.clientY;

addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
}

function addParticle(x, y, color) {
var particle = new Particle();
particle.init(x, y, color);
particles.push(particle);
}

function updateParticles() {

// Updated
for (var i = 0; i < particles.length; i++) {
particles[i].update();
}

// Remove dead particles
for (var i = particles.length – 1; i >= 0; i–) {
if (particles[i].lifeSpan < 0) {
particles[i].die();
particles.splice(i, 1);
}
}

}

function loop() {
requestAnimationFrame(loop);
updateParticles();
}

/**
* Particles
*/

function Particle() {

this.character = "*";
this.lifeSpan = 120; //ms
this.initialStyles = {
"position": "fixed",
"display": "inline-block",
"top": "0px",
"left": "0px",
"pointerEvents": "none",
"touch-action": "none",
"z-index": "10000000",
"fontSize": "25px",
"will-change": "transform"
};

// Init, and set properties
this.init = function (x, y, color) {

this.velocity = {
x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
y: 1
};

this.position = { x: x + 10, y: y + 10 };
this.initialStyles.color = color;

this.element = document.createElement('span');
this.element.innerHTML = this.character;
applyProperties(this.element, this.initialStyles);
this.update();

document.querySelector('.js-cursor-container').appendChild(this.element);
};

this.update = function () {
this.position.x += this.velocity.x;
this.position.y += this.velocity.y;
this.lifeSpan–;

this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px, 0) scale(" + (this.lifeSpan / 120) + ")";
}

this.die = function () {
this.element.parentNode.removeChild(this.element);
}

}

/**
* Utils
*/

// Applies css `properties` to an element.
function applyProperties(target, properties) {
for (var key in properties) {
target.style[key] = properties[key];
}
}

if (!('ontouchstart' in window || navigator.m**axTouchPoints)) init();
})();
</script>
</body>

</html>5、鼠標(biāo)粒子隨心拖尾跟隨

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>粒子隨心動(dòng)畫</title>
<script src="http://cdn.sucai8.cn/cdn/jquery/jquery-1.10.2.js"></script>
<style>
body {
overflow: hidden;
margin: 0;
}

.twitter:hover a {
transform: rotate(-45deg) scale(1.05);
}
.twitter:hover i {
color: #21c2ff;
}
.twitter a {
bottom: -40px;
right: -75px;
transform: rotate(-45deg);
}
.twitter i {
bottom: 7px;
right: 7px;
color: #00aced;
}

.social-icon a {
position: absolute;
background: white;
color: white;
box-shadow: -1px -1px 20px 0px rgba(0, 0, 0, 0.3);
display: inline-block;
width: 150px;
height: 80px;
transform-origin: 50% 50%;
transition: 0.15s ease-out;
}
.social-icon i {
position: absolute;
pointer-events: none;
z-index: 1000;
transition: 0.15s ease-out;
}

.**:hover a {
transform: rotate(45deg) scale(1.05);
}
.**:hover i {
color: #ec4c44;
}
.** a {
bottom: -40px;
left: -75px;
transform: rotate(45deg);
}
.** i {
bottom: 7px;
left: 7px;
color: #e62117;
}
</style>
</head>
<body>
<canvas></canvas>

// Initial Setup
var canvas = document.querySelector("canvas");
var c = canvas.getContext("2d");

canvas.width = innerWidth;
canvas.height = innerHeight;

// Variables
var mouse = {
x: innerWidth / 2,
y: innerHeight / 2 – 80,
};

var colors = ["#00bdff", "#4d39ce", "#088eff"];

// Event Listeners
addEventListener("mousemove", function (event) {
mouse.x = event.clientX;
mouse.y = event.clientY;
});

addEventListener("resize", function () {
canvas.width = innerWidth;
canvas.height = innerHeight;

init();
});

// Utility Functions
function randomIntFromRange(min, max) {
return Math.floor(Math.random() * (max – min + 1) + min);
}

function randomColor(colors) {
return colors[Math.floor(Math.random() * colors.length)];
}

// Objects
function Particle(x, y, radius, color) {
var _this = this;

this.update = function () {
var lastPoint = { x: _this.x, y: _this.y };
// Move points over time
_this.radians += _this.velocity;

// Drag effect
_this.lastMouse.x += (mouse.x – _this.lastMouse.x) * 0.05;
_this.lastMouse.y += (mouse.y – _this.lastMouse.y) * 0.05;

// Circular Motion
_this.distanceFromCenter.x =
_this.prevDistanceFromCenter.x + Math.sin(_this.radians) * 100;
_this.distanceFromCenter.y =
_this.prevDistanceFromCenter.x + Math.sin(_this.radians) * 100;

_this.x =
_this.lastMouse.x +
Math.cos(_this.radians) * _this.distanceFromCenter.x;
_this.y =
_this.lastMouse.y +
Math.sin(_this.radians) * _this.distanceFromCenter.y;

_this.draw(lastPoint);
};

this.draw = function (lastPoint) {
c.beginPath();
c.strokeStyle = _this.color;
c.lineWidth = _this.radius;
c.moveTo(lastPoint.x, lastPoint.y);
c.lineTo(_this.x, _this.y);
c.stroke();
c.closePath();
};
}

// Implementation
var particles = undefined;
function init() {
particles = [];

for (var i = 0; i < 50; i++) {
var radius = Math.random() * 2 + 1;
particles.push(
new Particle(
canvas.width / 2,
canvas.height / 2,
radius,
randomColor(colors)
)
);
}
}

// Animation Loop
function animate() {
requestAnimationFrame(animate);
c.fillStyle = "rgba(255, 255, 255, 0.05)";
c.fillRect(0, 0, canvas.width, canvas.height);

particles.forEach(function (particle) {
particle.update();
});
}

init();
animate();
</script>
</body>
</html>
6、鼠標(biāo)笑臉跟隨+仙女棒+泡泡+雪花+點(diǎn)擊煙花效果（自由組合）

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

</body>

</html>7、櫻花**

<!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></title>
</head>

function Sakura(x, y, s, r, fn) {
this.x = x;
this.y = y;
this.s = s;
this.r = r;
this.fn = fn;
}

Sakura.prototype.draw = function(cxt) {
cxt.save();
var xc = 40 * this.s / 4;
cxt.translate(this.x, this.y);
cxt.rotate(this.r);
cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
cxt.restore();
}

Sakura.prototype.update = function() {
this.x = this.fn.x(this.x, this.y);
this.y = this.fn.y(this.y, this.y);
this.r = this.fn.r(this.r);
if(this.x > window.innerWidth ||
this.x < 0 ||
this.y > window.innerHeight ||
this.y < 0
) {
this.r = getRandom('fnr');
if(Math.random() > 0.4) {
this.x = getRandom('x');
this.y = 0;
this.s = getRandom('s');
this.r = getRandom('r');
} else {
this.x = window.innerWidth;
this.y = getRandom('y');
this.s = getRandom('s');
this.r = getRandom('r');
}
}
}

SakuraList = function() {
this.list = [];
}
SakuraList.prototype.push = function(sakura) {
this.list.push(sakura);
}
SakuraList.prototype.update = function() {
for(var i = 0, len = this.list.length; i < len; i++) {
this.list[i].update();
}
}
SakuraList.prototype.draw = function(cxt) {
for(var i = 0, len = this.list.length; i < len; i++) {
this.list[i].draw(cxt);
}
}
SakuraList.prototype.get = function(i) {
return this.list[i];
}
SakuraList.prototype.size = function() {
return this.list.length;
}

function startSakura() {

requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame;
var canvas = document.createElement('canvas'),
cxt;
staticx = true;
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
canvas.setAttribute('id', 'canvas_sakura');
document.getElement**yTagName('body')[0].appendChild(canvas);
cxt = canvas.getContext('2d');
var sakuraList = new SakuraList();
for(var i = 0; i < 50; i++) {
var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
randomX = getRandom('x');
randomY = getRandom('y');
randomR = getRandom('r');
randomS = getRandom('s');
randomFnx = getRandom('fnx');
randomFny = getRandom('fny');
randomFnR = getRandom('fnr');
sakura = new Sakura(randomX, randomY, randomS, randomR, {
x: randomFnx,
y: randomFny,
r: randomFnR
});
sakura.draw(cxt);
sakuraList.push(sakura);
}
stop = requestAnimationFrame(function() {
cxt.clearRect(0, 0, canvas.width, canvas.height);
sakuraList.update();
sakuraList.draw(cxt);
stop = requestAnimationFrame(arguments.callee);
})
}

window.onresize = function() {
var canvasSnow = document.getElementById('canvas_snow');
canvasSnow.width = window.innerWidth;
canvasSnow.height = window.innerHeight;
}

img.onload = function() {
startSakura();
}

!function () {
function n(n, e, t) {
return n.getAttribute(e) || t
}

function e(n) {
return document.getElement**yTagName(n)
}

function t() {
var t = e("script"), o = t.length, i = t[o – 1];
return {l: o, z: n(i, "zIndex", -1), o: n(i, "opacity", .5), c: n(i, "color", "0,0,0"), n: n(i, "count", 99)}
}

function o() {
a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}

function i() {
r.clearRect(0, 0, a, c);
var n, e, t, o, m, l;
s.forEach(function (i, x) {
for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x – .5, i.y – .5, 1, 1), e = x + 1; e < u.length; e++) n = u[e], null !== n.x && null !== n.y && (o = i.x – n.x, m = i.y – n.y, l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m), t = (n.max – l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
}), x(i)
}

var a, c, u, m = document.createElement("canvas"), d = t(), l = "c_n" + d.l, r = m.getContext("2d"),
x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (n) {
window.setTimeout(n, 1e3 / 45)
}, w = Math.random, y = {x: null, y: null, max: 2e4};
m.id = l, m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o, e("body")[0].appendChild(m), o(), window.onresize = o, window.onmousemove = function (n) {
n = n || window.event, y.x = n.clientX, y.y = n.clientY
}, window.onmouseout = function () {
y.x = null, y.y = null
};
for (var s = [], f = 0; d.n > f; f++) {
var h = w() * a, g = w() * c, v = 2 * w() – 1, p = 2 * w() – 1;
s.push({x: h, y: g, xa: v, ya: p, max: 6e3})
}
u = s.concat([y]), setTimeout(function () {
i()
}, 100)
}();9、看板娘（左下角的小人）

直接引入js文件即可

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>逼真的煙花</title>
<script src="js/jquery.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
background: #000000;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<!– best viewed in chrome –>

// not so fun options =
const GRAVITY = 9.8;

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let particles = [];
let disableAutoFireworks = false;
let resetDisable = 0;

let loop = () => {

if (!disableAutoFireworks && Math.random() < FIREWORK_CHANCE) {
createFirework();
}

ctx.clearRect(0, 0, canvas.width, canvas.height);

particles.forEach((particle, i) => {
particle.animate();
particle.render();
if (particle.y > canvas.height
|| particle.x < 0
|| particle.x > canvas.width
|| particle.alpha <= 0
) {
particles.splice(i, 1);
}
});

requestAnimationFrame(loop);

};

let createFirework = (
x = Math.random() * canvas.width,
y = Math.random() * canvas.height
) => {

let speed = (Math.random() * 2) + BASE_PARTICLE_SPEED;
let maxSpeed = speed;

let red = ~~(Math.random() * 255);
let green = ~~(Math.random() * 255);
let blue = ~~(Math.random() * 255);

// use brighter colours
red = (red < 150 ? red + 150 : red);
green = (green < 150 ? green + 150 : green);
blue = (blue < 150 ? blue + 150 : blue);

// inner firework
for (let i = 0; i < PARTICLES_PER_FIREWORK; i++) {
let particle = new Particle(x, y, red, green, blue, speed);
particles.push(particle);

maxSpeed = (speed > maxSpeed ? speed : maxSpeed);
}

// outer edge particles to make the firework appear more full
for (let i = 0; i < 40; i++) {
let particle = new Particle(x, y, red, green, blue, maxSpeed, true);
particles.push(particle);
}

};

class Particle {

constructor(
x = 0,
y = 0,
red = ~~(Math.random() * 255),
green = ~~(Math.random() * 255),
blue = ~~(Math.random() * 255),
speed,
isFixedSpeed
) {

this.x = x;
this.y = y;
this.red = red;
this.green = green;
this.blue = blue;
this.alpha = 0.05;
this.radius = 1 + Math.random();
this.angle = Math.random() * 360;
this.speed = (Math.random() * speed) + 0.1;
this.velocityX = Math.cos(this.angle) * this.speed;
this.velocityY = Math.sin(this.angle) * this.speed;
this.startTime = (new Date()).getTime();
this.duration = Math.random() * 300 + FIREWORK_LIFESPAN;
this.currentDiration = 0;
this.dampening = 30; // slowing factor at the end

this.colour = this.getColour();

if (isFixedSpeed) {
this.speed = speed;
this.velocityY = Math.sin(this.angle) * this.speed;
this.velocityX = Math.cos(this.angle) * this.speed;
}

this.initialVelocityX = this.velocityX;
this.initialVelocityY = this.velocityY;

}

animate() {

this.currentDuration = (new Date()).getTime() – this.startTime;

// initial speed kick
if (this.currentDuration <= 200) {

this.x += this.initialVelocityX * PARTICLE_INITIAL_SPEED;
this.y += this.initialVelocityY * PARTICLE_INITIAL_SPEED;
this.alpha += 0.01;

this.colour = this.getColour(240, 240, 240, 0.9);

} else {

// normal expansion
this.x += this.velocityX;
this.y += this.velocityY;
this.colour = this.getColour(this.red, this.green, this.blue, 0.4 + (Math.random() * 0.3));

}

this.velocityY += GRAVITY / 1000;

// slow down particles at the end
if (this.currentDuration >= this.duration) {
this.velocityX -= this.velocityX / this.dampening;
this.velocityY -= this.velocityY / this.dampening;
}

if (this.currentDuration >= this.duration + this.duration / 1.1) {

// fade out at the end
this.alpha -= 0.02;
this.colour = this.getColour();

} else {

// fade in during expansion
if (this.alpha < 1) {
this.alpha += 0.03;
}

}
}

render() {

ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
ctx.lineWidth = this.lineWidth;
ctx.fillStyle = this.colour;
ctx.shadowBlur = 8;
ctx.shadowColor = this.getColour(this.red + 150, this.green + 150, this.blue + 150, 1);
ctx.fill();

}

getColour(red, green, blue, alpha) {

return `rgba(${red || this.red}, ${green || this.green}, ${blue || this.blue}, ${alpha || this.alpha})`;

}

let updateCanvasSize = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};

// run it!

updateCanvasSize();
$(window).resize(updateCanvasSize);
$(canvas).on('click', (e) => {

createFirework(e.clientX, e.clientY);

// stop fireworks when clicked, re-enable after short time
disableAutoFireworks = true;
clearTimeout(resetDisable);
resetDisable = setTimeout(() => {
disableAutoFireworks = false;
}, 5000);

});

loop();

</script>

</body>
</html>