☰

Image viewer

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

目前为 2019-10-28 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name            Image viewer
  3. // @name:vi         Image viewer
  4. // @namespace       http://devs.forumvi.com/
  5. // @description     Use grid wallpaper to highlight transparent image. Support to view the large image by holding the right mouse and drag.
  6. // @description:vi  Sử dụng nền lưới để làm nổi bật ảnh trong suốt. Hỗ trợ xem ảnh lớn bằng cách giữ và kéo chuột phải.
  7. // @version         2.2.2
  8. // @icon            http://i.imgur.com/ItcjCPc.png
  9. // @author          Zzbaivong
  10. // @oujs:author     baivong
  11. // @license         MIT; https://baivong.mit-license.org/license.txt
  12. // @match           http://*/*
  13. // @match           https://*/*
  14. // @require         https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js?v=a834d46
  15. // @noframes
  16. // @supportURL      https://github.com/lelinhtinh/Userscript/issues
  17. // @run-at          document-start
  18. // @grant           GM_addStyle
  19. // @inject-into     content
  20. // ==/UserScript==
  21.  
  22. (function() {
  23.   'use strict';
  24.  
  25.   /**
  26.    * Background mode
  27.    * @type {string} dark
  28.    *                light
  29.    */
  30.   var theme = 'dark';
  31.  
  32.   // Do not change the code below this line, unless you know how.
  33.   var doc = document,
  34.     color = theme === 'light' ? ['#eee', 'white'] : ['gray', '#444'];
  35.  
  36.   if (doc.contentType.indexOf('image/') !== 0) return;
  37.  
  38.   function scrollByDragging(container, disableH, disableV) {
  39.     function mouseUp(e) {
  40.       if (e.which !== 3) return;
  41.  
  42.       window.removeEventListener('mousemove', mouseMove, true);
  43.       container.style.cursor = 'default';
  44.     }
  45.  
  46.     function mouseDown(e) {
  47.       if (e.which !== 3) return;
  48.  
  49.       pos = {
  50.         x: e.clientX,
  51.         y: e.clientY,
  52.       };
  53.  
  54.       window.addEventListener('mousemove', mouseMove, true);
  55.       container.style.cursor = 'move';
  56.     }
  57.  
  58.     function mouseMove(e) {
  59.       if (!disableH) container.scrollLeft -= -pos.x + (pos.x = e.clientX);
  60.       if (!disableV) container.scrollTop -= -pos.y + (pos.y = e.clientY);
  61.     }
  62.  
  63.     var pos = {
  64.       x: 0,
  65.       y: 0,
  66.     };
  67.  
  68.     container.oncontextmenu = function(e) {
  69.       e.preventDefault();
  70.     };
  71.  
  72.     container.addEventListener('mousedown', mouseDown, false);
  73.     window.addEventListener('mouseup', mouseUp, false);
  74.   }
  75.  
  76.   GM_addStyle(
  77.     'body{background-attachment: fixed !important; background-position: 0px 0px, 10px 10px !important; background-size: 20px 20px !important; background-image: linear-gradient(45deg, ' +
  78.       color[0] +
  79.       ' 25%, transparent 25%, transparent 75%, ' +
  80.       color[0] +
  81.       ' 75%, ' +
  82.       color[0] +
  83.       ' 100%),linear-gradient(45deg, ' +
  84.       color[0] +
  85.       ' 25%, ' +
  86.       color[1] +
  87.       ' 25%, ' +
  88.       color[1] +
  89.       ' 75%, ' +
  90.       color[0] +
  91.       ' 75%, ' +
  92.       color[0] +
  93.       ' 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;}'
  94.   );
  95.  
  96.   scrollByDragging(doc.body);
  97.   scrollByDragging(doc.documentElement);
  98. })();