Useless Things Series: The Line

Adds a fading line mouse tail on top of webpages

目前为 2023-07-14 提交的版本。查看最新版本。

Wrap lines

// ==UserScript==
// @name         Useless Things Series: The Line
// @version      1.0
// @description  Adds a fading line mouse tail on top of webpages
// @match        *://*/*
// @grant        none
// @license      MIT
// @namespace https://gf.qytechs.cn/users/1126616
// ==/UserScript==

(function() {
  'use strict';

  // Create the tail element
  const tail = document.createElement('div');
  tail.style.position = 'fixed';
  tail.style.top = '0';
  tail.style.left = '0';
  tail.style.width = '0';
  tail.style.height = '4px';
  tail.style.backgroundColor = 'red';
  tail.style.opacity = '1';
  tail.style.transition = 'width 0.3s linear, opacity 1s ease-out';

  document.body.appendChild(tail);

  // Listen for mousemove event to update tail position
  document.addEventListener('mousemove', function(event) {
    const mouseX = event.clientX;
    const mouseY = event.clientY;

    tail.style.width = mouseX + 'px';
    tail.style.opacity = '1';
  });

  // Smoothly fade out the tail
  let timeoutId;
  document.addEventListener('mousemove', function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
      tail.style.opacity = '0';
    }, 2000);
  });

})();

欢迎访问Greasy Fork镜像