图片显示关闭

在网页上添加一个悬浮球，点击悬浮球可以显示或隐藏页面上的图片和视频，并刷新网页。ChatGPT写的。

Ten skrypt nie powinien być instalowany bezpośrednio. Jest to biblioteka dla innych skyptów do włączenia dyrektywą meta // @require https://update.greasyfork.org/scripts/484112/1307572/%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E5%85%B3%E9%97%AD.js 

// ==UserScript==
// @name         图片显示关闭
// @namespace    your-namespace
// @version      1.0
// @description  在网页上添加一个悬浮球，点击悬浮球可以显示或隐藏页面上的图片和视频，并刷新网页。ChatGPT写的。
// @AuThor       wkdxz @ 52pojie.cn
// @match        *://*/*
// @grant        GM_addStyle
// ==/UserScript==

(function () {
    'use strict';

    // 创建悬浮球
    const floatingButton = document.createElement('div');
    floatingButton.className = 'floating-button';
    floatingButton.style.position = 'fixed';
    floatingButton.style.bottom = '50px';
    floatingButton.style.right = '20px';
    floatingButton.style.width = '45px';
    floatingButton.style.height = '45px';
    floatingButton.style.borderRadius = '50%';
    floatingButton.style.backgroundColor = '#FF6666';
    floatingButton.style.display = 'flex';
    floatingButton.style.justifyContent = 'center';
    floatingButton.style.alignItems = 'center';
    floatingButton.style.boxShadow = '0 3px 10px rgba(0, 0, 0, 0.1)';
    floatingButton.style.cursor = 'pointer';
    floatingButton.style.transition = 'background-color 0.3s ease, box-shadow 0.3s ease'; // 修改过渡效果
    // 添加特效样式
    floatingButton.style.boxShadow = '0 0 5px rgba(0, 0, 0, 0.1)'; // 修改阴影大小

    // 创建文本节点
    const buttonText = document.createTextNode('打赏');

    // 创建 span 元素并设置样式
    const buttonSpan = document.createElement('span');
    buttonSpan.style.color = '#FFFFFF';
    buttonSpan.appendChild(buttonText);

    // 将 span 元素添加至悬浮球中
    floatingButton.appendChild(buttonSpan);

    // 将悬浮球添加至文档中
    document.body.appendChild(floatingButton);

    // 鼠标移入时添加特效
    floatingButton.addEventListener('mouseenter', function () {
        floatingButton.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.3)'; // 修改阴影大小
    });

    // 鼠标移出时取消特效
    floatingButton.addEventListener('mouseleave', function () {
        floatingButton.style.boxShadow = '0 0 5px rgba(0, 0, 0, 0.1)'; // 修改阴影大小
    });

    function clearContainer(container) {
        if (container.hasChildNodes()) {
            container.innerHTML = "";
            container.style.border = "";
        }
    }
    function getContainer() {
        const existContainer = document.querySelector(".big-img-container-c");
        if (!existContainer) {
            const container = document.createElement("div");
            container.className = "big-img-container-c";
            container.style.position = "fixed";
            container.style.top = 0;
            container.style.left = 0;
            container.style.zIndex = 999999;
            container.onclick = function () {
                clearContainer(container);
            };
            document.querySelector("html").appendChild(container);
            return container;
        }
        return existContainer;
    }

    // 给悬浮按钮绑定点击事件
    floatingButton.addEventListener('click', function (e) {
        const container = getContainer();
        const halfWidth = window.innerWidth / 2;
        const halfHeight = window.innerHeight / 2;
        clearContainer(container);
        const containerX = halfWidth - 140;
        const containerY = halfHeight - 140;
        container.style.left = `${containerX}px`;
        container.style.top = `${containerY}px`;
        container.style.border = "1px solid #000";
        const bigImg = e.target.cloneNode();
        container.appendChild(bigImg);
        // 创建img标签并设置src属性为要显示的图片链接
        var img = document.createElement('img');
        img.setAttribute("src", "https://pics1.baidu.com/feed/728da9773912b31bb4a16f73ba880476dbb4e133.jpeg@f_auto?token=01d1a7ea77627be9599ed029c2fcea0b"); 
        var bodyElement = document.getElementsByClassName('big-img-container-c')[0];
        bodyElement.appendChild(img);
        
        if (buttonText.textContent === '打赏') {
            buttonText.textContent = '打赏';
            floatingButton.style.backgroundColor = '#99CC66';
            floatingButton.style.color = '#FFFFFF';
            floatingButton.style.width = '25px';
            floatingButton.style.height = '25px';
        } else {
            buttonText.textContent = '打赏';
            floatingButton.style.backgroundColor = '#FF6666';
            floatingButton.style.color = '#000000';
            
        }
  
    });
})();