// ==UserScript== // @name 图集岛一行显示三张图切换 // @namespace lc1 // @version 1.1 // @description 添加一个按钮以切换图集岛页面图片显示样式,每行显示3张图片或恢复默认 // @match https://www.sqmuying.com/* // @grant GM_addStyle // @grant GM_setValue // @grant GM_getValue // @license MIT // @run-at document-idle // @downloadURL none // ==/UserScript== (function() { 'use strict'; // 默认状态为false,表示默认为单图显示 var isThreeImages = GM_getValue('isThreeImages', true); // 创建按钮并添加到页面左下角 var toggleButton = document.createElement('button'); toggleButton.style.position = 'fixed'; toggleButton.style.bottom = '10px'; toggleButton.style.left = '10px'; toggleButton.style.zIndex = '1000'; toggleButton.innerText = isThreeImages ? '恢复默认' : '三图显示'; document.body.appendChild(toggleButton); // 根据保存的状态设置样式 setDisplayStyle(); // 切换图片显示方式的函数 function toggleDisplayStyle() { // 切换状态 isThreeImages = !isThreeImages; // 保存状态 GM_setValue('isThreeImages', isThreeImages); // 更新按钮文本 toggleButton.innerText = isThreeImages ? '恢复默认' : '三图显示'; // 设置样式 setDisplayStyle(); } // 设置图片显示样式的函数 function setDisplayStyle() { // 根据状态切换样式 if (isThreeImages) { // 三图显示样式 GM_addStyle(` #kbox { display: flex; flex-wrap: wrap; justify-content: space-between; } #kbox > img { width: calc(33.333% - 1px); margin-bottom: 1px; object-fit: cover; } `); } else { // 清除样式,恢复默认的单图显示 GM_addStyle(` #kbox, #kbox > img { display: block; width: auto; margin-bottom: 1px; object-fit: cover; } `); } } // 给按钮添加点击事件 toggleButton.addEventListener('click', toggleDisplayStyle); })();