窗口悬浮图标-油猴脚本分享

开发调优
,
1

闲来无事，用 grok 糊了个油猴脚本，用来实现快速访问某网站。效果如下：

image
image3096×1786 223 KB

// ==UserScript==
// @name         添加可拖动悬浮图片
// @namespace    http://tampermonkey.net/
// @version      1.5
// @description  在每个网页（包括空白页面）添加一个可拖动的悬浮图片，带超链接，拖动时不触发跳转，初始位置在右下角
// @author       keka
// @match        *://*/*
// @match        about:blank
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 等待 DOM 加载完成
    function init() {
        // 如果 document.body 不存在，创建 body
        if (!document.body) {
            document.documentElement.appendChild(document.createElement('body'));
        }

        // 创建图片元素
        const img = document.createElement('img');
        img.src = 'https://lh3.googleusercontent.com/a/ACg8ocK3JRiPEm0FulcT8n41qVX7MBrVWcTa_uB5FSYGaeXRUL6fb0I=s576-c-no'; // 替换为你的图片 URL
        img.alt = '悬浮图片';
        img.style.width = '100px'; // 设置图片宽度
        img.style.height = '100px'; // 设置图片高度
        img.style.cursor = 'move'; // 鼠标悬停时显示移动光标

        // 创建超链接元素
        const link = document.createElement('a');
        link.href = 'https://google.com'; // 替换为你的目标链接
        link.target = '_blank'; // 在新标签页打开链接
        link.appendChild(img);

        // 创建容器 div 并设置悬浮样式
        const container = document.createElement('div');
        container.style.position = 'fixed';
        container.style.zIndex = '9999'; // 确保在最上层
        container.style.userSelect = 'none'; // 防止拖动时选中文字
        container.appendChild(link);

        // 将容器添加到页面
        document.body.appendChild(container);

        // 拖动功能
        let isDragging = false;
        let wasDragged = false;
        let currentX;
        let currentY;
        let initialX;
        let initialY;
        let startX;
        let startY;
        const dragThreshold = 5; // 像素阈值，判断是否为拖动

        container.addEventListener('mousedown', (e) => {
            initialX = e.clientX - currentX;
            initialY = e.clientY - currentY;
            startX = e.clientX;
            startY = e.clientY;
            isDragging = true;
            wasDragged = false;
            e.preventDefault(); // 防止默认行为（如图片拖动）
        });

        document.addEventListener('mousemove', (e) => {
            if (isDragging) {
                currentX = e.clientX - initialX;
                currentY = e.clientY - initialY;
                container.style.left = `${currentX}px`;
                container.style.top = `${currentY}px`;
                container.style.right = 'auto'; // 清除初始右边距
                container.style.bottom = 'auto'; // 清除初始底边距
                // 检查是否超过拖动阈值
                const deltaX = Math.abs(e.clientX - startX);
                const deltaY = Math.abs(e.clientY - startY);
                if (deltaX > dragThreshold || deltaY > dragThreshold) {
                    wasDragged = true;
                }
            }
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
        });

        // 单独处理链接的点击事件
        link.addEventListener('click', (e) => {
            if (wasDragged) {
                e.preventDefault(); // 拖动后阻止跳转
                e.stopPropagation();
            }
        });

        // 初始化位置：右下角，距离底部和右侧约窗口高度的20%
        const windowHeight = window.innerHeight;
        const offset = windowHeight * 0.2; // 20% 的窗口高度
        currentX = window.innerWidth - 100 - offset; // 图片宽度100px + 20%偏移
        currentY = windowHeight - 100 - offset; // 图片高度100px + 20%偏移
        container.style.left = `${currentX}px`;
        container.style.top = `${currentY}px`;
    }

    // 监听 DOM 加载完成事件
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init(); // DOM 已加载，直接执行
    }
})();
9 Likes
2

感谢分享

3

感谢大佬。