DM5 image zoom

動漫屋放大鏡

  1. // ==UserScript==
  2. // @name DM5 image zoom
  3. // @author Shiaupiau (https://github.com/stu43005)
  4. // @include http://*.dm5.com/*
  5. // @include https://*.dm5.com/*
  6. // @version 1.1
  7. // @namespace https://greasyfork.org/users/445066
  8. // @description 動漫屋放大鏡
  9. // ==/UserScript==
  10.  
  11. (function init(func) {
  12. setTimeout(function () {
  13. if (typeof jQuery === 'undefined') {
  14. console.log('[DM5 image zoom] No jQuery, try again later');
  15. init(func);
  16. return;
  17. }
  18. const script = document.createElement('script');
  19. script.textContent = '(' + func.toString() + ')(window)';
  20. document.body.appendChild(script);
  21. }, 500);
  22. })(function () {
  23. const zoomRatio = 2;
  24.  
  25. const resultWidth = 300;
  26. const resultHeight = 300;
  27.  
  28. if (!jQuery(".view-main").length) return;
  29.  
  30. jQuery("body").append(`<div id="img-zoom-container" style="position: fixed; right: 20px; bottom: 100px; background-color: #1a1a1a; padding: 10px; border-radius: 3px;"><div id="img-zoom-result" style="width: ${resultWidth}px; height: ${resultHeight}px;"></div></div>`);
  31.  
  32. jQuery(".rightToolBar").prepend(`<a href="javascript:void(0);" title="放大鏡" id="img-zoom-button" class="logo_3" style="display: block !important;"><div class="tip">放大鏡</div></a>`);
  33.  
  34. jQuery("#img-zoom-button").click(function () {
  35. jQuery("#img-zoom-container").toggle();
  36. });
  37.  
  38. const lensWidth = resultWidth / zoomRatio;
  39. const lensHeight = resultHeight / zoomRatio;
  40.  
  41. const result = document.getElementById("img-zoom-result");
  42. jQuery(document).on("mousemove touchmove", ".view-main img", moveLens);
  43.  
  44. function moveLens(e) {
  45. /* Prevent any other actions that may occur when moving over the image */
  46. e.preventDefault();
  47.  
  48. const img = e.target;
  49. /* Set background properties for the result DIV */
  50. result.style.backgroundImage = "url('" + img.src + "')";
  51. result.style.backgroundSize = (img.width * zoomRatio) + "px " + (img.height * zoomRatio) + "px";
  52.  
  53. /* Get the cursor's x and y positions: */
  54. const pos = getCursorPos(e, img);
  55. /* Calculate the position of the lens: */
  56. let x = pos.x - (lensWidth / 2);
  57. let y = pos.y - (lensHeight / 2);
  58. /* Prevent the lens from being positioned outside the image: */
  59. if (x > img.width - lensWidth) { x = img.width - lensWidth; }
  60. if (x < 0) { x = 0; }
  61. if (y > img.height - lensHeight) { y = img.height - lensHeight; }
  62. if (y < 0) { y = 0; }
  63. /* Display what the lens "sees": */
  64. result.style.backgroundPosition = "-" + (x * zoomRatio) + "px -" + (y * zoomRatio) + "px";
  65. }
  66.  
  67. function getCursorPos(e, img) {
  68. let x = 0, y = 0;
  69. e = e || window.event;
  70. /* Get the x and y positions of the image: */
  71. const a = img.getBoundingClientRect();
  72. /* Calculate the cursor's x and y coordinates, relative to the image: */
  73. x = e.pageX - a.left;
  74. y = e.pageY - a.top;
  75. /* Consider any page scrolling: */
  76. x = x - window.pageXOffset;
  77. y = y - window.pageYOffset;
  78. return { x: x, y: y };
  79. }
  80. });