JS代码(代码中包含了sketch.min.js的源码,如果你的网站已经引用了,请删掉下面的6到7行。):
代码语言:javascript
复制
/*
* 鼠标点击特效:canvas点击效果
*/
/* Copyright (C) 2013 Justin Windle sketch.min.js, http://soulwire.co.uk */
var Sketch=function(){"use strict";function e(e){return"[object Array]"==Object.prototype.toString.call(e)}function t(e){return"function"==typeof e}function n(e){return"number"==typeof e}function o(e){return"string"==typeof e}function r(e){return E[e]||String.fromCharCode(e)}function i(e,t,n){for(var o in t)(n||!e.hasOwnProperty(o))&&(e[o]=t[o]);return e}function u(e,t){return function(){e.apply(t,arguments)}}function a(e){var n={};for(var o in e)n[o]=t(e[o])?u(e[o],e):e[o];return n}function c(e){function n(n){t(n)&&n.apply(e,[].splice.call(arguments,1))}function u(e){for(_=0;_ 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 = 50;
//圆点颜色库
var COLOURS = [ "#5ee4ff", "#f44033", "#ffeb3b", "#F38630", "#FA6900", "#f403e8", "#F9D423" ];
var particles = [];
var pool = [];
var clickparticle = Sketch.create({
container : document.getElementById('clickCanvas')
});
clickparticle.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, 20));//圆点大小范围
particle.wander = random(0.5, 2.0);
particle.color = random(COLOURS);
particle.drag = random(0.9, 0.99);
theta = random(TWO_PI);
force = random(1, 5);
particle.vx = sin(theta) * force;
particle.vy = cos(theta) * force;
particles.push(particle);
};
clickparticle.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]);
}
};
clickparticle.draw = function() {
clickparticle.globalCompositeOperation = 'lighter';
for ( var i = particles.length - 1; i >= 0; i--) {
particles[i].draw(clickparticle);
}
};
//按下时显示效果,mousedown 换成 click 为点击时显示效果(我用的 click)
document.addEventListener("mousedown", function(e) {
var max, j;
//排除一些元素
"TEXTAREA" !== e.target.nodeName && "INPUT" !== e.target.nodeName && "A" !== e.target.nodeName && "I" !== e.target.nodeName && "IMG" !== e.target.nodeName
&& function() {
for (max = random(15, 20), j = 0; j < max; j++)
clickparticle.spawn(e.clientX, e.clientY);
}();
});
}
复制上面的 js 代码到主题的主 js 文件最下面,或者保存为一个单独的 js 文件,然后引入主题(如果你是单独保存为一个 js 文件,请在 footer 引入js文件)。 在主题的 header.php 文件在下方,加入以下代码。
代码语言:javascript
复制
<?php if(!wp_is_mobile()): ?>
<div id="clickCanvas" style=" position:fixed;left:0;top:0;z-index:999999999;pointer-events:none;"></div>
<?php endif; ?>
如果移动端也想要这效果,请删除上面代码的第1行和第3行即可。