Greasy Fork

Greasy Fork is available in English.

图集岛一行显示三张图切换

添加一个按钮以切换图集岛页面图片显示样式，每行显示3张图片或恢复默认

当前为 2024-05-02 提交的版本，查看 最新版本。

// ==UserScript==
// @name         图集岛一行显示三张图切换
// @namespace    lc1
// @version      1.2
// @description  添加一个按钮以切换图集岛页面图片显示样式，每行显示3张图片或恢复默认
// @match        https://www.sqmuying.com/*
// @grant        GM_addStyle
// @grant        GM_setValue
// @grant        GM_getValue
// @license      MIT
// @run-at       document-idle
// ==/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);
})();