v2ex 图片灯箱插件

v2ex 图片灯箱插件，可以使用滚轮放大缩小。
换行
// ==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;
        }
      }
    });
  });
})();
欢迎访问Greasy Fork镜像
