查看图片/左右翻页

Greasy Fork is available in English.
查看图片/左右翻页

将网页中的所有图片全屏放大，通过左右翻页查看，更加方便和护眼
当前为 2025-03-07 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         查看图片/左右翻页
// @version      1.0
// @description  将网页中的所有图片全屏放大，通过左右翻页查看，更加方便和护眼
// @author       Cooper
// @match        *://*/*
// @namespace http://greasyfork.icu/users/1104216
// ==/UserScript==
 
(function() {
    'use strict';
    // Your code here...
    const flip = document.createElement("button");
    flip.textContent = "ON";
    flip.style = `position:fixed; top:5%; 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 = Array.from(jQuery("img")).map(img=>img.src); //***
            console.log('图片数组:',comicImages);
            
            let currentIndex = 0;
            const { overlay, currentComic } = createOverlay();
 
            // 显示当前图片
            const showCurrentComic = () => {
                currentComic.src = comicImages[currentIndex]; //***
                currentComic.alt = `加载失败 ${currentIndex + 1}/${comicImages.length}`;
                currentComic.style.color='rgb(255,255,255)';
            };
 
            // 初始化显示第一张图片
            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;
    });
})();