☰

Image viewer

Use grid wallpaper to highlight transparent image. Support to view the large image by holding the right mouse and drag.

目前為 2018-05-16 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         Image viewer
  3. // @namespace    http://devs.forumvi.com/
  4. // @description  Use grid wallpaper to highlight transparent image. Support to view the large image by holding the right mouse and drag.
  5. // @version      2.0.2
  6. // @icon         http://i.imgur.com/ItcjCPc.png
  7. // @author       Zzbaivong
  8. // @oujs:author  baivong
  9. // @license      MIT; https://baivong.mit-license.org/license.txt
  10. // @match        http://*/*
  11. // @match        https://*/*
  12. // @require      https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js?v=a834d46
  13. // @noframes
  14. // @supportURL   https://github.com/lelinhtinh/Userscript/issues
  15. // @run-at       document-idle
  16. // @grant        none
  17. // ==/UserScript==
  18.  
  19. (function () {
  20.  
  21.     'use strict';
  22.  
  23.     /**
  24.      * Background mode
  25.      * @type {string} dark
  26.      *                light
  27.      */
  28.     var theme = 'dark',
  29.  
  30.  
  31.         color,
  32.         doc = document;
  33.  
  34.     if (theme === 'light') {
  35.         color = ['#eee', 'white'];
  36.     } else {
  37.         color = ['gray', '#444'];
  38.     }
  39.  
  40.     function scrollByDragging(container, disableH, disableV) {
  41.  
  42.         function mouseUp(e) {
  43.             if (e.which !== 3) return;
  44.  
  45.             window.removeEventListener('mousemove', mouseMove, true);
  46.             container.style.cursor = 'default';
  47.         }
  48.  
  49.         function mouseDown(e) {
  50.             if (e.which !== 3) return;
  51.  
  52.             pos = {
  53.                 x: e.clientX,
  54.                 y: e.clientY
  55.             };
  56.  
  57.             window.addEventListener('mousemove', mouseMove, true);
  58.             container.style.cursor = 'move';
  59.         }
  60.  
  61.         function mouseMove(e) {
  62.             if (!disableH) container.scrollLeft -= (-pos.x + (pos.x = e.clientX));
  63.             if (!disableV) container.scrollTop -= (-pos.y + (pos.y = e.clientY));
  64.         }
  65.  
  66.         var pos = {
  67.             x: 0,
  68.             y: 0
  69.         };
  70.  
  71.         container.oncontextmenu = function (e) {
  72.             e.preventDefault();
  73.         };
  74.  
  75.         container.addEventListener('mousedown', mouseDown, false);
  76.         window.addEventListener('mouseup', mouseUp, false);
  77.  
  78.     }
  79.  
  80.     if (document.contentType.indexOf('image/') === 0) {
  81.  
  82.         GM_addStyle('body{background-attachment: fixed !important; background-position: 0px 0px, 10px 10px !important; background-size: 20px 20px !important; background-image: linear-gradient(45deg, ' + color[0] + ' 25%, transparent 25%, transparent 75%, ' + color[0] + ' 75%, ' + color[0] + ' 100%),linear-gradient(45deg, ' + color[0] + ' 25%, ' + color[1] + ' 25%, ' + color[1] + ' 75%, ' + color[0] + ' 75%, ' + color[0] + ' 100%) !important;} body > img {background-color: transparent !important; background-image: none !important; display: block; margin: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0;} body > img:hover {background: rgba(0, 0, 0, 0.4) !important; outline: 3px solid #333;} body > img[style*="cursor: zoom-out;"], body > img.overflowing {position: relative !important;}');
  83.  
  84.         scrollByDragging(doc.body);
  85.         scrollByDragging(doc.documentElement);
  86.  
  87.     }
  88.  
  89. }());