给网站添加鼠标点击特效

说在前面

又到了水文章的时候了

之前给网站加了“富强”,“民主”,“...”的24字核心价值观,但是吧= =和这个主题完全不搭哇,于是乎就想淘一个闪闪发光bulingbuling的鼠标点击特效~(其实就想换了,哪那么多废话!)

既然是淘的,这里放上作者项目链接:https://www.iowen.cn/canvas-click-effect-second-edition/ 作者:一为

嘛,话不多说,我们开始吧~

 

?首先放特效图?

 

 

注:这是一个canvas点击效果,基于sketch.js效果。

JS代码,点此展开

/*
 * 鼠标点击特效,canvas点击效果,第二版
 * 原文地址:https://www.iowen.cn/canvas-click-effect-second-edition
 */

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

代码咋用嘞?

第一步,Ctrl+C,Ctrl+V,保存为一个 “某.js” 文件,拖入到主题的js文件夹下

然后在footer.php文件中,选择合适的位置,引用这个JS文件。

引用JS,点此展开

例:<script type="text/javascript" src=".../js/某.js">

第二步,Ctrl+C,Ctrl+V,在任意一个合适的位置加入下方判定为移动设备时的代码(WP的header.php 或者 footer.php文件均可)

移动设备,点此展开
<?php if(!wp_is_mobile()): ?>
<div id="clickCanvas" style=" position:fixed;left:0;top:0;z-index:99999;pointer-events:none;"></div>
<?php endif; ?>

第三步,回到站点,Ctrl+F5,刷新缓存~就可以啦,香哇~

点赞
  1. azeng说道:

    对了 博主 我这个设置了以后只能在主页显示 在其他的页面就显示不了了 这还需要在其他页面添加这个对吧?

  2. azeng说道:

    博主你好!! 我是按照您的步骤做得,但还是没有这个特效诶!

    1. 嫣折羽 嫣折羽说道:

      你可以不用设置单独的js文件,可以放在原有的主题的js文本最下面

    2. 嫣折羽 嫣折羽说道:

      将js文件后面添加如下代码,保存,就可以不用填写第三步div模块了,可以试一下,点击特效好像并不支持php7.1和php7.4,请自测。 :hehe:

      var canvas = document.createElement(‘div’);
      canvas.setAttribute(‘style’, ‘position: fixed;left: 0;top: 0;z-index: 999999999;pointer-events: none;’);
      canvas.setAttribute(‘id’, ‘clickCanvas’);
      document.getElementsByTagName(‘body’)[0].appendChild(canvas);

      1. azeng说道:

        好滴!我试试哦!

发表评论

电子邮件地址不会被公开。必填项已用 * 标注