Image viewer

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

当前为 2017-06-10 提交的版本,查看 最新版本

  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.0
  6. // @icon http://i.imgur.com/ItcjCPc.png
  7. // @author Zzbaivong
  8. // @license MIT
  9. // @match http://*/*
  10. // @match https://*/*
  11. // @noframes
  12. // @supportURL https://github.com/baivong/Userscript/issues
  13. // @run-at document-idle
  14. // @grant GM_addStyle
  15. // ==/UserScript==
  16.  
  17. (function () {
  18.  
  19. 'use strict';
  20.  
  21. /**
  22. * Background mode
  23. * @type {string} dark
  24. * light
  25. */
  26. var theme = 'dark',
  27.  
  28.  
  29. color,
  30. doc = document;
  31.  
  32. if (theme === 'light') {
  33. color = ['#eee', 'white'];
  34. } else {
  35. color = ['gray', '#444'];
  36. }
  37.  
  38. function scrollByDragging(container, disableH, disableV) {
  39.  
  40. function mouseUp(e) {
  41. if (e.which !== 3) return;
  42.  
  43. window.removeEventListener('mousemove', mouseMove, true);
  44. container.style.cursor = 'default';
  45. }
  46.  
  47. function mouseDown(e) {
  48. if (e.which !== 3) return;
  49.  
  50. pos = {
  51. x: e.clientX,
  52. y: e.clientY
  53. };
  54.  
  55. window.addEventListener('mousemove', mouseMove, true);
  56. container.style.cursor = 'move';
  57. }
  58.  
  59. function mouseMove(e) {
  60. if (!disableH) container.scrollLeft -= (-pos.x + (pos.x = e.clientX));
  61. if (!disableV) container.scrollTop -= (-pos.y + (pos.y = e.clientY));
  62. }
  63.  
  64. var pos = {
  65. x: 0,
  66. y: 0
  67. };
  68.  
  69. container.oncontextmenu = function (e) {
  70. e.preventDefault();
  71. };
  72.  
  73. container.addEventListener('mousedown', mouseDown, false);
  74. window.addEventListener('mouseup', mouseUp, false);
  75.  
  76. }
  77.  
  78. if (document.contentType.indexOf('image/') === 0) {
  79.  
  80. 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;}');
  81.  
  82. scrollByDragging(doc.body);
  83. scrollByDragging(doc.documentElement);
  84.  
  85. }
  86.  
  87. }());

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址