图片多风格

给移动端图片添加多种滤镜风格，用户通过编号调整喜欢的效果

// ==UserScript==
// @name         图片多风格
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  给移动端图片添加多种滤镜风格，用户通过编号调整喜欢的效果
// @author       You
// @match        *://*/*
// @grant        GM_addStyle
// @run-at       document-end
// ==/UserScript==

(function () {
    'use strict';

    // 用户选择风格编号（修改此值即可切换风格）
    const styleIndex = 12; // 默认风格编号，用户可以调整为 1~15 的任意值

    // 判断是否是移动端设备
    if (window.innerWidth <= 800) {
        const styles = [
            `
            /* 风格 1: 默认复古风格 */
            img {
                filter: sepia(60%) brightness(1.1) contrast(1.2) saturate(1.2);
                border-radius: 10px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
                transition: all 0.3s ease;
            }
            img:hover {
                filter: sepia(80%) brightness(1.2) contrast(1.3);
                transform: scale(1.05) rotate(-2deg);
            }
            `,
            `
            /* 风格 2: 模糊效果 */
            img {
                filter: blur(5px);
                transition: filter 0.3s ease;
            }
            img:hover {
                filter: blur(3px);
            }
            `,
            `
            /* 风格 3: 黑白效果 */
            img {
                filter: grayscale(100%);
                transition: filter 0.3s ease;
            }
            img:hover {
                filter: grayscale(50%);
            }
            `,
            `
            /* 风格 4: 反转颜色 */
            img {
                filter: invert(100%);
                transition: filter 0.3s ease;
            }
            img:hover {
                filter: invert(50%);
            }
            `,
            `
            /* 风格 5: 饱和度调整 */
            img {
                filter: saturate(50%);
                transition: filter 0.3s ease;
            }
            img:hover {
                filter: saturate(150%);
            }
            `,
            `
            /* 风格 6: 色相旋转 */
            img {
                filter: hue-rotate(90deg);
                transition: filter 0.3s ease;
            }
            img:hover {
                filter: hue-rotate(180deg);
            }
            `,
            `
            /* 风格 7: 阴影效果 */
            img {
                filter: drop-shadow(10px 10px 15px rgba(0, 0, 0, 0.5));
                transition: all 0.3s ease;
            }
            img:hover {
                filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.7));
            }
            `,
            `
            /* 风格 8: 透明度调整 */
            img {
                filter: opacity(0.7);
                transition: filter 0.3s ease;
            }
            img:hover {
                filter: opacity(1);
            }
            `,
            `
            /* 风格 9: 圆形裁剪 */
            img {
                border-radius: 50%;
                transition: transform 0.3s ease;
            }
            img:hover {
                transform: scale(1.1);
            }
            `,
            `
            /* 风格 10: 镜像翻转 */
            img {
                transform: scaleX(-1);
                transition: transform 0.3s ease;
            }
            img:hover {
                transform: scaleX(1);
            }
            `,
            `
            /* 风格 11: 动画旋转 */
            img {
                animation: rotate 3s infinite linear;
            }
            @keyframes rotate {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }
            `,
            `
            /* 风格 12: 复古 + 胶片颗粒 */
            img {
                filter: sepia(50%) contrast(1.2) brightness(1.1);
                background: url('data:image/png;base64,...') repeat;
                mix-blend-mode: multiply;
                transition: all 0.3s ease;
            }
            img:hover {
                filter: sepia(70%) contrast(1.4) brightness(1.2);
            }
            `,
            `
            /* 风格 13: 倾斜效果 */
            img {
                transform: skew(10deg, 5deg);
                transition: transform 0.3s ease;
            }
            img:hover {
                transform: skew(0deg, 0deg);
            }
            `,
            `
            /* 风格 14: 亮度增强 */
            img {
                filter: brightness(1.5);
                transition: filter 0.3s ease;
            }
            img:hover {
                filter: brightness(1.2);
            }
            `,
            `
            /* 风格 15: 新拟物风格 */
            img {
                box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2),
                            -10px -10px 20px rgba(255, 255, 255, 0.5);
                border-radius: 12px;
                transition: box-shadow 0.3s ease;
            }
            img:hover {
                box-shadow: inset 10px 10px 20px rgba(0, 0, 0, 0.2),
                            inset -10px -10px 20px rgba(255, 255, 255, 0.5);
            }
            `
        ];

        // 应用用户选择的风格
        GM_addStyle(styles[styleIndex - 1]);
    }
})();