本帖最后由 wkdxz 于 2023-10-14 17:56 编辑
功能类似谷歌浏览器插件:Text Mode (当前及新网页生效)
主要功能:隐藏绝大部分的网页图片和视频(有部分不能隐藏我也无能为力),在摸鱼时显得没那么嚣张。点击网页右下角悬浮按钮后,显示或隐藏网页图片,“只对当前浏览的网页有效”。我用起来挺顺手,所以分享给大家了。
我不会JS,是ChatGPT帮我写的,如果要添加新功能,或者修改,请复制代码后让AI帮改。
不会用脚本的兄弟,看这里的教程
。
功能演示:
代码里面的网址会被加上[url]标签,如果不能正常使用,就下载附件吧。
图片视频显示隐藏悬浮球.txt
(3.8 KB, 下载次数: 36)
[JavaScript] 纯文本查看 复制代码 // ==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)'; // 修改阴影大小
});
// 给悬浮按钮绑定点击事件
floatingButton.addEventListener('click', function() {
// 获取所有的图片元素
const images = document.querySelectorAll('img, image, photo, thumbnail, picture, gallery, icon, avatar, video, art-player-wrapper, imgbox-border, img-wrapper, goods');
// 遍历所有的图片元素,并设置它们的 display 样式为 none 或者 block
images.forEach(function(element) {
if (element.style.display === 'none') {
element.style.display = '';
} else {
element.style.display = 'none';
}
});
// 去除连续的多个空行
const paragraphs = document.querySelectorAll('p');
let previousIsEmpty = false;
paragraphs.forEach(function(paragraph) {
if (paragraph.textContent.trim() === '') {
if (previousIsEmpty) {
paragraph.style.display = 'none';
} else {
previousIsEmpty = true;
}
} else {
previousIsEmpty = false;
}
});
// 切换按钮文本内容
if (buttonText.textContent === '隐图') {
buttonText.textContent = '显图';
floatingButton.style.backgroundColor = '#99CC66';
floatingButton.style.color = '#FFFFFF';
} else {
buttonText.textContent = '隐图';
floatingButton.style.backgroundColor = '#FF6666';
floatingButton.style.color = '#000000';
}
});
})();
|