☰

Greasy Fork is available in English.

小文专属

点击屏幕时显示特效和文字

// ==UserScript==
// @name         小文专属
// @namespace    http://tampermonkey.net/
// @version      0.03
// @description  点击屏幕时显示特效和文字
// @author       You
// @match        *://*/*
// @exclude      *://cps.kwaixiaodian.com/*  // 排除特定网站
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';
    // 在腾讯文档中禁用脚本
    if (window.location.hostname === 'docs.qq.com') {
        return;  // 如果在腾讯文档网站上，脚本直接停止执行
    }

    // 如果在 cps.kwaixiaodian.com 域名下，不执行任何操作
    if (window.location.hostname === 'cps.kwaixiaodian.com') {
        return;
    }

    // 爱心颜色变量，方便修改颜色时同步文字和爱心的颜色
    const heartColor = '#FF7F7F';
    const texts = ['小文每天开心', '小文生日快乐'];  // 文字数组，交替显示

    // 添加爱心动画和文字的样式
    GM_addStyle(`
      .heart {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: ${heartColor};
        transform: rotate(45deg);
        animation: heartbeat 1s ease-out forwards;
        z-index: 999;
      }

      .heart::before,
      .heart::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: ${heartColor};
        border-radius: 50%;
      }

      .heart::before {
        top: -10px;
        left: 0px;
      }

      .heart::after {
        top: 0px;
        left: -10px;
      }

      @keyframes heartbeat {
        0% {
          transform: scale(0) rotate(45deg);
          opacity: 1;
        }
        50% {
          transform: scale(1.1) rotate(45deg);
          opacity: 0.8;
        }
        100% {
          transform: scale(1) rotate(45deg);
          opacity: 0;
        }
      }

      .text {
        position: absolute;
        color: ${heartColor}; /* 使用与爱心相同的颜色 */
        font-size: 14px;
        font-weight: bold;
        animation: floatText 1s ease-out forwards;
        z-index: 1000;
      }

      @keyframes floatText {
        0% {
          opacity: 1;
          transform: translateY(0);
        }
        100% {
          opacity: 0;
          transform: translateY(-50px);
        }
      }
    `);

    // 确保页面完全加载
    window.addEventListener('load', function () {
        console.log('页面已加载');

        // 监听鼠标点击事件
        document.addEventListener('click', function (event) {
             // 如果点击的目标是爱心或文字元素，则不处理
             if (event.target.classList.contains('heart') || event.target.classList.contains('text')) {
                  return;
             }

            // 使用 pageX 和 pageY 获取页面坐标
            const x = event.pageX;
            const y = event.pageY;

            // 随机选择显示的文字
            const randomText = texts[Math.floor(Math.random() * texts.length)];

            // 创建文字元素
            const text = document.createElement('div');
            text.classList.add('text');
            text.innerText = randomText;

            // 设置文字的位置为点击位置上方
            text.style.left = `${x - 30}px`; // 调整水平位置
            text.style.top = `${y - 50}px`; // 调整垂直位置

            // 创建爱心元素
            const heart = document.createElement('div');
            heart.classList.add('heart');

            // 设置爱心的位置为点击位置
            heart.style.left = `${x - 10}px`; // 调整位置使爱心的中心对准点击点
            heart.style.top = `${y - 10}px`;

            // 将文字和爱心元素添加到页面中
            document.body.appendChild(text);
            document.body.appendChild(heart);

            // 设置定时器，0.8秒后删除文字和爱心元素
            setTimeout(() => {
                text.remove();
                heart.remove();
            }, 800);
        });
    });
})();