查看图片

将网页中的所有图片全屏放大，通过上下点击翻页查看，更加方便和护眼
目前為 2025-03-27 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         查看图片
// @namespace    http://tampermonkey.net/
// @version      2.1
// @description  将网页中的所有图片全屏放大，通过上下点击翻页查看，更加方便和护眼
// @author       Cooper
// @match        *://*/*
// ==/UserScript==
 
(function() {
    'use strict';
    // Your code here...
    const flip = document.createElement("button");
    flip.textContent = "ON";
    flip.style = `position:fixed; top:5%; right:5%;
                 width:40px; height:40px; border-radius:20px;
                 border:1px dashed #0d6efd;
                 color:#0d6efd; font-size:16px; padding:1px 1px;
                 background-color:transparent; z-index:1000000000;`
    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)";
            overlay.style.display = "flex";
            overlay.style.flexDirection = "column";
            overlay.style.alignItems = "center";
            overlay.style.justifyContent = "center";
            overlay.style.zIndex = "999999999"; // 确保遮罩层位于顶层
 
	        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)';
                flip.textContent = currentIndex + 1;
            };
 
            showCurrentComic();

	    overlay.addEventListener("click", (e) => {
                e.stopPropagation(); // 阻止事件冒泡到底层
 
		const screenWidth = window.innerHeight;
                const clickX = e.clientY;
 
                if (clickX < screenWidth / 2) {
                    // 点击在屏幕上半部分
                    if (currentIndex > 0) {
                        currentIndex--;
                        showCurrentComic();
                    }
                } else {
                    // 点击在屏幕下半部分
                    if (currentIndex < comicImages.length - 1) {
                        currentIndex++;
                        showCurrentComic();
                    }
                }
			});
        };

        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镜像
