图片悬停缩略图预览

鼠标悬停图片显示缩略图跟随鼠标
换行
// ==UserScript==
// @name         图片悬停缩略图预览
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  鼠标悬停图片显示缩略图跟随鼠标
// @author       YOU
// @match        https://qlabel.tencent.com/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
    'use strict';

    let previewImg = null;
    let showTimer = null;
    let currentTarget = null;
    let isClicked = false;
    let T = 100;

    // 创建缩略图元素
    function createPreviewImage(src) {
        if (previewImg) return;

        previewImg = document.createElement('img');
        previewImg.src = src;
        previewImg.style.position = 'fixed';
        previewImg.style.width = '200px';
        previewImg.style.maxHeight = '200px';
        previewImg.style.zIndex = '9999';
        previewImg.style.pointerEvents = 'none';
        previewImg.style.border = '2px solid #ccc';
        previewImg.style.borderRadius = '6px';
        previewImg.style.boxShadow = '0 0 8px rgba(0,0,0,0.5)';
        document.body.appendChild(previewImg);
    }

    // 鼠标移动时更新缩略图位置
    function updatePosition(e) {
        if (previewImg) {
            previewImg.style.left = (e.clientX + 15) + 'px';
            previewImg.style.top = (e.clientY + 15) + 'px';
        }
    }

    // 监听所有图片元素
    document.addEventListener('mouseover', function (e) {
        if (e.target.tagName.toLowerCase() === 'img') {
            currentTarget = e.target;
            isClicked = false;

            showTimer = setTimeout(() => {
                if (!isClicked) {
                    createPreviewImage(currentTarget.src);
                    document.addEventListener('mousemove', updatePosition);
                }
            }, T);
        }
    });

    document.addEventListener('mouseout', function (e) {
        if (e.target === currentTarget || e.target === previewImg) {
            clearTimeout(showTimer);
            if (previewImg) {
                previewImg.remove();
                previewImg = null;
                document.removeEventListener('mousemove', updatePosition);
            }
        }
    });

    // 鼠标点击图片后不再显示缩略图
    document.addEventListener('click', function (e) {
        if (e.target.tagName.toLowerCase() === 'img') {
            isClicked = true;
            if (previewImg) {
                previewImg.remove();
                previewImg = null;
                document.removeEventListener('mousemove', updatePosition);
            }
        }
    });
})();
欢迎访问Greasy Fork镜像
