Puock 网站点击特效

105次阅读

共计 1541 个字符，预计需要花费 4 分钟才能阅读完成。

就是扒一下 aplayer 官网后面的背景条变化，确实好看又简单，主要是本人真的不喜欢太繁琐，光标变化呀，光标点击样式啊，达咩！

首先去网站F12，擦，有三个JS都不认识，还好有地址，不管了，交给小克分析一下到底是谁，哪个JS这么好看，哦，原来是你小子 evanyou.min.js实现的样式条变化，还是写VUE大佬写的，自己网站引入试试，至于拖慢多少运行速度，无所谓，反正博客又没人看

在主题文件夹下fuction.php下添加方法引入JS

function addEvanyouJs() {
    wp_enqueue_script('evanyou', pk_get_static_url() . '{你的路径}', [], PUOCK_CUR_VER_STR,true);
}
add_action('wp_enqueue_scripts', 'addEvanyouJs');

在footer.php中添加组件，至于为什么在footer中添加，别问我我也不知道只跟它熟关系好一点

<canvas id="evanyou-canvas"
        style="position: fixed;
               top: 0; left: 0;
               width: 100%; height: 100%;
               z-index: -1;
               pointer-events: none;">
</canvas>

JS文件 略作修改官方是不断在变化那种让ai改了下咱也懒得动那个脑子改为点击变换自己改下名称添加到合适的位置在function中引入就行

(function () {
  var c = document.getElementById('evanyou-canvas'),
      x = c.getContext('2d'),
      pr = window.devicePixelRatio || 1,
      w = window.innerWidth,
      h = window.innerHeight,
      f = 90,
      q,
      m = Math,
      r = 0, // 用于颜色角度变化
      u = m.PI * 2,
      v = m.cos,
      z = Math.random;

  c.width = w * pr;
  c.height = h * pr;
  x.scale(pr, pr);
  x.globalAlpha = 0.6;

  function i() {
    x.clearRect(0, 0, w, h);
    q = [{x: 0, y: h * 0.7 + f}, {x: 0, y: h * 0.7 - f}];
    while (q[1].x < w + f) d(q[0], q[1]);
  }

  function d(i, j) {
    x.beginPath();
    x.moveTo(i.x, i.y);
    x.lineTo(j.x, j.y);
    var k = j.x + (z() * 2 - 0.25) * f,
        n = y(j.y);
    x.lineTo(k, n);
    x.closePath();
    r -= u / -50;
    x.fillStyle = '#' + (
      (v(r) * 127 + 128 << 16) |
      (v(r + u / 3) * 127 + 128 << 8) |
      (v(r + u / 3 * 2) * 127 + 128)
    ).toString(16);
    x.fill();
    q[0] = q[1];
    q[1] = {x: k, y: n};
  }

  function y(p) {
    var t = p + (z() * 2 - 1.1) * f;
    return (t > h || t < 0) ? y(p) : t;
  }

  // 初始绘制一次
  i();

  // 添加点击事件：每次点击刷新画面
  window.addEventListener('click', function () {
    i(); // 重新绘制一次
  });
  
  window.addEventListener('resize', function () {
    w = window.innerWidth;
    h = window.innerHeight;
    c.width = w * pr;
    c.height = h * pr;
    x.scale(pr, pr);
    i();
  });
})();

正文完