您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Add-on that allows the user to scroll images so they can view pixel art in browser
// ==UserScript== // @name Pixel Art Zoom // @namespace http://tampermonkey.net/ // @version 0.2.1 // @description Add-on that allows the user to scroll images so they can view pixel art in browser // @author You // @match *://*/* // @grant none // ==/UserScript== (function () { "use strict"; main(); function main() { var CSSPixelated = "pixelated-21321322"; var mouseDown = false; var target = undefined; var imgContainer = undefined; var originalWidth = 0; var originalHeight = 0; var originalX = 0; var originalY = 0; var zoom = 1; addCSSClasses(CSSPixelated); document.addEventListener("mousedown", function (e) { var targetElem = e.target.tagName; if ((e.ctrlKey && e.shiftKey) && targetElem === "IMG") { mouseDown = true; e.preventDefault(); e.stopPropagation(); createImgContainer(e); zoom += 1; resizeImg(); } }); document.addEventListener("mouseup", function (e) { if (mouseDown) { e.preventDefault(); e.stopPropagation(); mouseDown = false; } }); document.addEventListener("wheel", function (e) { if (e.ctrlKey && imgContainer && e.target.hasAttribute("data-open")) { e.preventDefault(); e.stopPropagation(); if (e.deltaY > 0) { zoom = Math.max(1, zoom - 1); } else if (e.deltaY < 0) { zoom = Math.min(10, zoom + 1); } resizeImg(); } }); function resizeImg() { if (target === undefined || imgContainer === undefined) throw new Error("target or imageContainer were undefined"); var targetWidth = zoom * originalWidth; var targetHeight = zoom * originalHeight; target.style.width = targetWidth + "px"; target.style.height = targetHeight + "px"; if (originalX + targetWidth > window.scrollX + window.innerWidth) { imgContainer.style.left = window.scrollX + Math.max(0, Math.floor((window.innerWidth - targetWidth) / 2)) + "px"; } else { imgContainer.style.left = Math.max(window.scrollX, originalX - (targetWidth - originalWidth) / 2) + "px"; } if (originalY + targetHeight > window.scrollY + window.innerHeight) { imgContainer.style.top = window.scrollY + Math.max(0, Math.floor((window.innerHeight - targetHeight) / 2)) + "px"; } else { imgContainer.style.top = Math.max(window.scrollY, originalY - (targetHeight - originalHeight) / 2) + "px"; } } function createImgContainer(e) { if (imgContainer !== undefined) return; target = e.target; imgContainer = document.createElement("div"); var offset = cumulativeOffset(target); imgContainer.style.top = offset.top + "px"; imgContainer.style.left = offset.left + "px"; imgContainer.className = CSSPixelated; target = target.cloneNode(true); target.removeAttribute("style"); target.removeAttribute("class"); target.removeAttribute("height"); target.removeAttribute("width"); target.setAttribute("data-open", "active"); originalWidth = target.width; originalHeight = target.height; originalX = offset.left; originalY = offset.top; imgContainer.appendChild(target); document.body.insertBefore(imgContainer, document.body.firstElementChild); target.setAttribute("tabindex", "0"); target.addEventListener("blur", function () { destroyImgContainer(); }, true); target.focus(); function cumulativeOffset(elem) { var bbox = elem.getBoundingClientRect(); var style = window.getComputedStyle(elem); var marginLeft = parseInt((style.marginLeft || "0").replace(" px", ""), 10); var marginTop = parseInt((style.marginTop || "0").replace(" px", ""), 10); return { left: bbox.left + window.scrollX - marginLeft, top: bbox.top + window.scrollY - marginTop, }; } } function destroyImgContainer() { if (imgContainer === undefined) return; document.body.removeChild(imgContainer); target = undefined; imgContainer = undefined; zoom = 1; } } function addCSSClasses(className) { var head = document.head; var newCss = document.createElement("style"); newCss.type = "text/css"; newCss.innerHTML = "\n." + className + "{\n image-rendering: -webkit-optimize-contrast; \n image-rendering: -webkit-crisp-edges; \n image-rendering: -moz-crisp-edges; \n image-rendering: -o-crisp-edges; \n image-rendering: pixelated; \n -ms-interpolation-mode: nearest-neighbor; \n position:absolute;\n z-index: 1000000;\n box-shadow: 0 19px 38px rgba(0, 0, 0, 0.6), 0 15px 12px rgba(0, 0, 0, 0.46);\n background: #BBBC94;\n}\n"; head.appendChild(newCss); } })();
QingJ © 2025
镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址