wkdxz 发表于 2023-10-14 09:58

摸鱼工具,图片视频显示/隐藏悬浮球【ChatGPT帮写的油猴脚本】

本帖最后由 wkdxz 于 2023-10-14 17:56 编辑

功能类似谷歌浏览器插件:Text Mode(当前及新网页生效)

主要功能:隐藏绝大部分的网页图片和视频(有部分不能隐藏我也无能为力),在摸鱼时显得没那么嚣张。点击网页右下角悬浮按钮后,显示或隐藏网页图片,“只对当前浏览的网页有效”。我用起来挺顺手,所以分享给大家了。

我不会JS,是ChatGPT帮我写的,如果要添加新功能,或者修改,请复制代码后让AI帮改。

不会用脚本的兄弟,看这里的教程


功能演示:


代码里面的网址会被加上标签,如果不能正常使用,就下载附件吧。



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


最新的 发表于 2023-10-14 14:02

本帖最后由 最新的 于 2023-10-14 14:04 编辑

添加了一个快捷键,这样摸鱼更高效,快捷键是ctrl+h键 ,可以在if (event.shiftKey && event.key === 'c')更换快捷键,这个示例是shift+c键
// ==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 = '20px';
    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';

    // 添加文本节点
    const buttonText = document.createTextNode('隐图');
    floatingButton.appendChild(buttonText);
    document.body.appendChild(floatingButton);

    // 给悬浮按钮绑定点击事件
    floatingButton.addEventListener('click', toggleImagesAndVideos);

    // 给文档添加键盘事件监听器
    document.addEventListener('keydown', function(event) {
      if (event.ctrlKey && event.key === 'h') {
            toggleImagesAndVideos();
      }
    });

    function toggleImagesAndVideos() {
      // 获取所有的图片和视频元素
      const images = document.querySelectorAll('img, video');

      // 遍历所有的图片和视频元素,并设置它们的 display 样式为 none 或者 block
      images.forEach(function(element) {
            if (element.style.display === 'none') {
                element.style.display = '';
            } else {
                element.style.display = 'none';
            }
      });

      // 切换按钮文本内容
      if (buttonText.textContent === '隐图') {
            buttonText.textContent = '显图';
            floatingButton.style.backgroundColor = '#99CC66';
      } else {
            buttonText.textContent = '隐图';
            floatingButton.style.backgroundColor = '#FF6666';
      }
    }

    // 添加自定义样式
    GM_addStyle(`
      /* 悬浮按钮的样式 */
      .floating-button:hover {
            background-color: #FF6666;
      }

      /* 悬浮按钮的文字样式 */
      .floating-button span {
            font-family: '宋体';
            font-size: 9px;
            font-weight: bold;
      }
    `);

})();


最新的 发表于 2023-11-18 17:02

M920 发表于 2023-11-18 11:23
受益匪浅,多谢分享

共同学习,相互启迪,宛如古人共赏清风明月,不亦乐乎!

ai115098 发表于 2024-3-15 13:38

最新的 发表于 2023-10-14 14:02
添加了一个快捷键,这样摸鱼更高效,快捷键是ctrl+h键 ,可以在if (event.shiftKey && event.key === 'c') ...

我修改了一下快捷键,按F2直接实现, if (event.key === 'F2')

manmandewan 发表于 2023-10-14 10:31

感谢分享

orb001 发表于 2023-10-14 10:46

谢谢分享

PUQ 发表于 2023-10-14 11:06

感谢分享

abca 发表于 2023-10-14 11:51


感谢分享

yuze0804007 发表于 2023-10-14 13:20

666, 赞一个

dzpos 发表于 2023-10-14 13:45

谢谢分享,收藏了

a252588137 发表于 2023-10-14 18:09

诶,公司限制,没法用

a17785140957 发表于 2023-10-15 10:52

感谢分享
页: [1] 2 3
查看完整版本: 摸鱼工具,图片视频显示/隐藏悬浮球【ChatGPT帮写的油猴脚本】