☰

MaxShowBox

最大程度显示图片的库

Este script não deve ser instalado diretamente. Este script é uma biblioteca de outros scripts para incluir com o diretório meta // @require https://update.greasyfork.org/scripts/518420/1488747/MaxShowBox.js 

// ==UserScript==
// @name         MaxShowBox
// @version      2024.11.22
// @description  最大程度显示图片的库
// @author       You
// @grant        none
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_deleteValue
// @grant        GM_download
// @require https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js
// ==/UserScript==
 
/**
 * 让图片放大到原始或满屏大小
 * @class
 * @example
 const maxShowBox = new MaxShowBox();
 MaxShowBox.Add_Img(img);
 
 @ps 每调用一次Add_Img显示一次Img;
*/
function MaxShowBox(){
	const box = `<div class="max-show-box">
				<button class="closeBox">X</button>
				</div>
	           <style>
			       .max-show-box{
					   width:100vw;
					   height:100vh;
					   overflow:auto;
					   z-index:9999;
					   position:fixed;
					   top:0;
					   left:0;
					   background:#434343;
				   }
				   .max-show-box button{
					   width:20vmin;
					   height:20vmin;
					   border-radius:50%;
					   position:fixed;
					   bottom:0;
					   left:50%;
					   transform:translateX(-50%);
					   background: #272727;
					   color: #ffffff;
					   opacity: .5;
					   border: none;
				   }
				   .max-show-box img{
					   min-width:100vw;
					   min-height:100vh;
					   max-width:none;
					   max-height:none;
					   width:auto !important;
					   height:auto !important;
				   }
			   </style>
	`
	/**
	 * 最大显示一张图片
	 * @param {JQuery} img
	 * @example maxShowBox.Add_Img(img);
	*/
	this.Add_Img = (img)=>{
		CreatBox();
		Add_Img(img);
	}
	function CreatBox(){
		if($('.max-show-box').length==0){
			$('body').append(box);
			$('.max-show-box').hide();
			$('.max-show-box .closeBox').click(function(){
				$('.max-show-box').fadeOut();
			});
		}
	}
	function Add_Img(img){
		const newimg = $('<img />').attr('src',img[0].src);
		$('.max-show-box img').remove();
		$('.max-show-box').append(newimg);
		$('.max-show-box').fadeIn();
	}
	
	let autoRun = false;
	/**
	 * 自动给图片加一个最大显示按钮，由body touchstart触发
	 * @param null
	 * @example maxShowBox.StartAutoRun();
	*/
	this.StartAutoRun = ()=>{
		autoRun = true;
		$('body').on('touchstart',()=>{
			if(!autoRun){return;}
			$('img:not([add-max-show-box]):not(.max-show-box img)').each(function(){
				$(this).attr('add-max-show-box','yes');
				const parent = $(this).parent();
				if(parent.css("position")!="absolute"||parent.css("position")!="relative"){
					parent.css("position","relative");
				}
				
				const img = $(this);
				const bu = $('<div>B</div>').css({
								'position': 'absolute',
								'bottom': '0px',
								'color': 'white',
								'font-size': '10vw',
								'background': '#0000005e'
						})
				img.after(bu);
				bu.click(function(event){
						event.stopPropagation();
						maxShowBox.Add_Img(img);
						ScrollToCenter($('.max-show-box'));
					});
			});
		});
	}
	/**
	 * 停止给图片加一个最大显示按钮
	 * @param null
	 * @example maxShowBox.StopAutoRun();
	*/
	this.StopAutoRun = ()=>{autoRun = false;}
	
	function ScrollToCenter(item){
		const sh = item[0].scrollHeight;
		const ch = item[0].clientHeight;
		const y = (sh-ch)/2;
		const sw = item[0].scrollWidth;
		const cw = item[0].clientWidth;
		const x = (sw-cw)/2;
		item[0].scrollTop = y;
		item[0].scrollLeft = x;
	}
}
const maxShowBox = new MaxShowBox();
$(function(){
	maxShowBox.StartAutoRun();
})
window.MaxShowBox = maxShowBox;