返回首頁 

v2ex 图片灯箱插件

v2ex 图片灯箱插件,可以使用滚轮放大缩小。


Install this script?
// ==UserScript==// @name         v2ex 图片灯箱插件// @namespace    https://github.com/dlzmoe/scripts// @version      0.0.8// @description  v2ex 图片灯箱插件,可以使用滚轮放大缩小。// @author       dlzmoe// @match        *://v2ex.com/*// @match        *://*.v2ex.com/*// @match        *://www.v2ex.com/*// @icon         data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAOGVYSWZNTQAqAAAACAABh2kABAAAAAEAAAAaAAAAAAACoAIABAAAAAEAAAAgoAMABAAAAAEAAAAgAAAAAI9OQMkAAARKSURBVHicrVe7SzNLFP/t7CObbEg0WliJooUxcAsfYKFW2lh8NhdLwUIsbMTCBG3EIoid4J/xNd9t7ZSAIiJcNaSIYBcbNVlMsq/M3MK762YziVE8EGbYOTnnd55zRsD/xBiT7+/vf+u6vlir1VTLskApFfADRAhhiqIgEokYsVjsNJVK/S0Igg0AAgAUCoW/np+fr15fX5WfUPgZ9fT0WP39/dNjY2P/SowxOZfLXZXLZUVRFIyPjyORSCAUCkEQmh3AGIMgCGCMAYC3D/IFiVIKy7Lw8vKCfD6PcrmsALhijEWFu7u7P4+Pj78URcHMzAyi0WjXCoPnQeLxV6tVXFxcwLIsDA0N/UN0XV8EgGQyCU3TQClFo9FAo9EAY8xb/Xv33OWllIJSCsaYt/L4GWPQNA3JZBIAoOv6olSr1VQASCQS3h/9FgWtC54FPcDbB2UkEgkAQK1WUyXLsgAAiqK0MFNKIQgCKKVcl3ajMChPFEXIsgwAsCwLkltq/jh1K/C7RAhxAQmSX3DQwo2NDZydnbWcu4D9vKFQCNvb21hdXfUU8ZIwaIQHwD3w50Aul/PQflZyjuPg6OgIoVAIKysrbRUGc6wFgH8lhLRV2K4Es9ksotEolpaWuuobTSEAPhIPACSpCV/XtL+/D03TMD8/3ySP5xHiB+BnYIxBFEUQQkAI8faiKHJ/fh7GGPb29nB9fd0kryOAIBAXgCRJkCQJhBBv5QGSJKmJ33EcpNNp5PP5JpnBkHXMgcvLy65cXiqVsLm5iaenp6bvpmkinU7j+PgYw8PD3BJuCgEAr+kEAXXqCQMDAzg5OUFfX19LaN7e3pDJZGDbNtcLXA+4ICzL6nj5uHu3WtwwBIn3rQVAJws/6/WlUgmZTAa6rnvKXHDxeByHh4cghHgXFRcAT8Hy8nLXVy/P0nA4jGw2i8HBQTiO09kDfgD+PvDdWUCWZRwcHGB0dBTuhcczkhsCfyfslvwACSHY3d1FKpXy8oinvAlAEATw7tLPEjB4DgBbW1uYnJyEYRhfb8V+hJ0AtPPA+vo6ZmdnYZpmizy3urruhFNTU17n83dDf9dz6z0cDmNtbQ0LCwswDKNpNON1QK4Hgi7a2dnh/qkdMcZgmmbbCYo7DxBCGKVU4CWh/ybjCQwqNwyD2zWDSdhoNAC8P1gkWZZhmiYsy4KiKCCEeAz1ev1LpfdZqYqiCMaY1xNkWQZRVdUAgHK5/PHxY2bzVv/eb43fa/7RPMhPCPGGUVeXqqqGFI1GTyuVyq9isQhN0xCJRBAKhbqy8KvE2PvDpFgsAgA0TTsVGGPy+fn5m67riizLGBkZQTweh6Io31YUJEopbNtGpVLBw8MDbNtGLBaz5ubmopIgCPbt7e00gCtd15VCofAjSjtRLBazent7pwVBsD0TGWPyzc3N72q1uliv11XHcX70eS7LMlRVNSKRyOnExIT3PP8P91unlxYYZf4AAAAASUVORK5CYII=// @grant        none// ==/UserScript==(function () {"use strict";!(function (s) {s.fn.simplebox = function (e) {var d = s.extend({fadeSpeed: 400,darkMode: !1}, e),a = s("html"),o = s('<div id="overlay"></div>'),c = s('<div class="cross"></div>'),n = s("<img class='slb' style='transform: scale(1);' id='imagetran'>"),i = d.fadeSpeed,r = !1;d.darkMode ?(o.css("background-color", "black"),c.addClass("cross--dark"),s(".slb").addClass("slb--invert"),n.addClass("slb--invert")) :(o.css("background-color", "rgba(0, 0, 0, 0.8)"),c.addClass("cross--light"));var t = function () {o.fadeOut(i),n.removeClass("slb--opened"),(r = !1),a.css("overflow-y", "scroll");};return (o.click(t),c.click(t),s(document).keyup(function (s) {27 == s.keyCode && r && t();}),this.each(function () {o.append(c);var e = s(this);e.click(function () {(r = !0), a.css("overflow-y", "hidden");var e = s(this),d = e.attr("src");n.attr("src", d),n.css("max-height", "100%"),n.css("max-width", "100%"),n.addClass("pop-in"),n.removeClass("pop-out"),n.addClass("center"),n.addClass("slb--opened"),o.css("pointer-events", "initial"),o.append(n),a.append(o),o.fadeIn(i);});}));};})(jQuery);$(function () {$("body").append("<style>#overlay,.cross{will-change:transform}#overlay,.center,.cross{top:0;right:0}.cross{position:fixed;margin:30px 55px 0 0;cursor:pointer;transition:.3s all ease-in-out;z-index:99;opacity:9}.cross::after,.cross::before{position:absolute;content:'';width:35px;height:2px}.cross::after{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.cross::before{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.cross--light::after,.cross--light::before{background-color:#000}.cross--dark::after,.cross--dark::before{background-color:#fff}.slb{cursor:-webkit-zoom-in;cursor:zoom-in}.slb--invert{box-shadow:2px 2px 12px 1px rgba(255,255,255,.3)}.slb--opened{cursor:auto}.pop-in{-webkit-animation:pop-in 250ms;-moz-animation:pop-in 250ms;-ms-animation:pop-in 250ms}.pop-out{-webkit-animation:pop-out 250ms;-moz-animation:pop-out 250ms;-ms-animation:pop-out 250ms}#overlay{display:none;width:100vw;height:100vh;position:fixed;left:0;bottom:0;pointer-events:none;cursor:pointer;z-index:999;cursor:zoom-out}.center{max-height:100%;position:absolute;bottom:0;left:0;margin:auto;cursor:zoom-out}@-webkit-keyframes pop-in{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes pop-in{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes pop-out{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}}@keyframes pop-out{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}}</style>");$(".topic_content img:not([src^='/'])").addClass("slb");$(".reply_content img:not([src^='/'])").addClass("slb");$(".slb").simplebox({fadeSpeed: 100,});$(".topic_content img:not([src^='/'])").parent().attr("href", "javascript:void(0)").attr("target", "");$(".reply_content img:not([src^='/'])").parent().attr("href", "javascript:void(0)").attr("target", "");$(".topic_content img:not([src^='/'])").click(function () {let step = 0.1;let INNER = false;function $(select) {return document.querySelector(select);}// 鼠标相对页面的位置function getMousePos(event) {let e = event || window.event;let scrollX =document.documentElement.scrollLeft || document.body.scrollLeft;let scrollY =document.documentElement.scrollTop || document.body.scrollTop;let x = e.pageX || e.clientX + scrollX;let y = e.pageY || e.clientY + scrollY;return {x: x,y: y};}function getElementPosition(select) {let dom = document.querySelector(select);let scrollX =document.documentElement.scrollLeft || document.body.scrollLeft;let scrollY =document.documentElement.scrollTop || document.body.scrollTop;let rect = dom.getBoundingClientRect();let x = scrollX + dom.getBoundingClientRect().left;let y = scrollY + dom.getBoundingClientRect().top;let height = dom.getBoundingClientRect().height;let width = dom.getBoundingClientRect().width;return {x: x,y: y,height: height,width: width};}function mouseIndom(event) {let mouseMsg = getMousePos(event);let domMsg = getElementPosition("#imagetran");let flagX =mouseMsg.x > domMsg.x && mouseMsg.x < domMsg.x + domMsg.width;let flagY =mouseMsg.y > domMsg.y && mouseMsg.y < domMsg.y + domMsg.height;if (flagX && flagY) {return true;} else {return false;}}// 文档鼠标移动document.onmousemove = function (event) {INNER = mouseIndom(event);};if (window.addEventListener)//FF,火狐浏览器会识别该方法window.addEventListener("DOMMouseScroll", wheel, false);window.onmousewheel = document.onmousewheel = wheel; //W3C//统一处理滚轮滚动事件function wheel(event) {var delta = 0;if (!event) event = window.event;if (event.wheelDelta) {delta = event.wheelDelta / 120;if (window.opera) delta = -delta;} else if (event.detail) {delta = -event.detail / 3;}if (delta) handle(delta, event);}//上下滚动时的具体处理函数function handle(delta, event) {if (INNER) {if (delta > 0) {//向上滚动let scale =Number.parseFloat($("#imagetran").style.transform.replace("scale(", "")) + step;$("#imagetran").style.webkitTransform = "scale(" + scale + ")";} else {//向下滚动let scale =Number.parseFloat($("#imagetran").style.transform.replace("scale(", "")) - step;if (scale > 0.1) {$("#imagetran").style.webkitTransform = "scale(" + scale + ")";}}event.preventDefault();event.stopPropagation();return;}}});});})();