绅士漫画左右翻页

把下拉式漫画变成左右翻页，更加方便和护眼，适配绅士漫画
当前为 2025-02-20 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         绅士漫画左右翻页
// @namespace    http://tampermonkey.net/
// @version      5.2
// @description  把下拉式漫画变成左右翻页，更加方便和护眼，适配绅士漫画
// @author       Cooper
// @match        *://*/photos-slide-aid-*
// @icon         https://s21.ax1x.com/2025/02/20/pEQ3VY9.jpg
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';
    // Your code here...
    const flip = document.createElement("button");
    flip.textContent = "ON";
	flip.style = `position:fixed; top:10%; right:5%;
                 width:50px; height:50px; border-radius:25px;
                 color:#0d6efd; font-size:16px; padding:3px 3px;
                 background-color:transparent; z-index:10000;`
	document.body.appendChild(flip);

	function turnON(){
        // 创建遮罩层和翻页界面
        const createOverlay = () => {
            const body = document.body;

            // 创建遮罩层
            const overlay = document.createElement("div");
            overlay.id = "comic-overlay";
            overlay.style.position = "fixed";
            overlay.style.top = "0";
            overlay.style.left = "0";
            overlay.style.width = "100%";
            overlay.style.height = "100%";
            overlay.style.backgroundColor = "rgba(0, 0, 0, 0.8)"; // 半透明黑色是0.5，0.8更不透明
            overlay.style.display = "flex";
            overlay.style.flexDirection = "column";
            overlay.style.alignItems = "center";
            overlay.style.justifyContent = "center";
            overlay.style.zIndex = "9999"; // 确保遮罩层在最上层

			body.appendChild(overlay); // 将遮罩层添加到页面

            // 创建漫画图片容器
            const comicContainer = document.createElement("div");
            comicContainer.id = "comic-container";
            comicContainer.style.position = "relative";
            comicContainer.style.width = "100%";
            comicContainer.style.maxWidth = "800px";
            comicContainer.style.height = "auto";
            comicContainer.style.margin = "20px 0";
            comicContainer.style.textAlign = "center";

			overlay.appendChild(comicContainer);

            const currentComic = document.createElement("img");
            currentComic.id = "current-comic";
            currentComic.style.width = "100%";
            currentComic.style.height = "auto";
            currentComic.style.display = "block";

			comicContainer.appendChild(currentComic);

            return { overlay, currentComic };
        };

        // 初始化漫画翻页功能
        const initComicViewer = () => {
            // 获取页面上所有图片的 src
            const comicImages = imglist;  // imglist是原网站的全局变量
            console.log('图片数组:',comicImages);
            
            let currentIndex = 0;
            const { overlay, currentComic } = createOverlay();

            // 显示当前图片
            const showCurrentComic = () => {
                currentComic.src = comicImages[currentIndex].url;
                currentComic.alt = `漫画 ${currentIndex + 1}/${comicImages.length}`;
            };

            // 初始化显示第一张图片
            showCurrentComic();

            // 左右点击翻页
			overlay.addEventListener("click", (e) => {
                e.stopPropagation(); // 阻止事件冒泡到底层

				const screenWidth = window.innerWidth; // 获取屏幕宽度
                const clickX = e.clientX; // 获取点击事件的 X 坐标

                if (clickX < screenWidth / 2) {
                    // 点击在屏幕左半部分
                    if (currentIndex > 0) {
                        currentIndex--;
                        showCurrentComic();
                    }
                } else {
                    // 点击在屏幕右半部分
                    if (currentIndex < comicImages.length - 1) {
                        currentIndex++;
                        showCurrentComic();
                    }
                }

                flip.textContent = currentIndex;
			});
        };

        // 初始化漫画查看器
        initComicViewer();
    }

    function turnOFF(){
        const overlay = document.getElementById("comic-overlay");
        document.body.removeChild(overlay);
        flip.textContent = "ON";
    }

    let flag = false;
    flip.addEventListener("click", (e) => {
        e.stopPropagation(); // 阻止事件冒泡到底层
        if (!flag){
            turnON();
        }else{
            turnOFF();
        }
        flag = !flag;
    });
})();
欢迎访问Greasy Fork镜像
