// ==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';
}
});
})();