☰

Zoom on Hover

Zoom on Hover enlarges images when you hover over them.

目前为 2024-11-25 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         Zoom on Hover
  3. // @name:es      Zoom on Hover
  4. // @version      1.2
  5. // @description  Zoom on Hover enlarges images when you hover over them.
  6. // @description:es Zoom on Hover amplía las imágenes cuando pasas el cursor sobre ellas.
  7. // @author       Adam Jensen
  8. // @match        *://*/*
  9. // @grant        GM_addStyle
  10. // @license      MIT
  11. // @namespace https://greasyfork.org/users/1398884
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     // Configuration options (you can adjust these values)
  18.     const MAX_WIDTH = 500;  // Maximum width of the enlarged image
  19.     const MAX_HEIGHT = 600; // Maximum height of the enlarged image
  20.     const ZOOM_FACTOR = 2;  // Zoom factor (1x, 1.5x, 2x, 3x, etc)
  21.  
  22.     // Styles
  23.     GM_addStyle(`
  24.         .ampliar-img-flotante {
  25.             position: absolute;
  26.             z-index: 9999;
  27.             border: 2px solid #ccc;
  28.             background: rgba(255, 255, 255, 0.9);
  29.             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  30.             display: none;
  31.             padding: 0px;
  32.             pointer-events: none;
  33.             height: auto;
  34.             width: auto;
  35.             box-sizing: border-box;
  36.         }
  37.         .ampliar-img-flotante img {
  38.             width: 100%;
  39.             height: 100%;
  40.             object-fit: contain;
  41.             display: block;
  42.             margin: 0;
  43.             box-sizing: border-box;
  44.         }
  45.     `);
  46.  
  47.     // Create the floating window
  48.     const ventanaFlotante = document.createElement('div');
  49.     ventanaFlotante.classList.add('ampliar-img-flotante');
  50.     const imagenFlotante = document.createElement('img');
  51.     ventanaFlotante.appendChild(imagenFlotante);
  52.     document.body.appendChild(ventanaFlotante);
  53.  
  54.     // Function to enlarge the image with the zoom factor
  55.     const ampliarImagen = (event) => {
  56.         const target = event.target;
  57.  
  58.         let imgSrc = '';
  59.  
  60.         if (target.tagName === 'IMG') {
  61.             // If the element is an <img>, use the src attribute
  62.             imgSrc = target.src;
  63.         } else if (target.style.backgroundImage) {
  64.             // If the element has a background image, extract the URL
  65.             imgSrc = target.style.backgroundImage.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
  66.         }
  67.  
  68.         // Skip if the image source is not found or is an unwanted source
  69.         if (!imgSrc || imgSrc.includes('youtube.com') || imgSrc.includes('gstatic.com')) {
  70.             return;
  71.         }
  72.  
  73.  
  74.         const img = new Image();
  75.         img.onload = () => {
  76.             const widthWithZoom = img.width * ZOOM_FACTOR;
  77.             const heightWithZoom = img.height * ZOOM_FACTOR;
  78.  
  79.             let finalWidth, finalHeight;
  80.  
  81.             if (img.width > img.height) {
  82.                 finalWidth = Math.min(widthWithZoom, MAX_WIDTH);
  83.                 finalHeight = (img.height * finalWidth) / img.width;
  84.                 if (finalHeight > MAX_HEIGHT) {
  85.                     finalHeight = MAX_HEIGHT;
  86.                     finalWidth = (img.width * finalHeight) / img.height;
  87.                 }
  88.             } else {
  89.                 finalHeight = Math.min(heightWithZoom, MAX_HEIGHT);
  90.                 finalWidth = (img.width * finalHeight) / img.height;
  91.                 if (finalWidth > MAX_WIDTH) {
  92.                     finalWidth = MAX_WIDTH;
  93.                     finalHeight = (img.height * finalWidth) / img.width;
  94.                 }
  95.             }
  96.  
  97.             imagenFlotante.src = imgSrc;
  98.             ventanaFlotante.style.display = 'block';
  99.             ventanaFlotante.style.width = `${finalWidth}px`;
  100.             ventanaFlotante.style.height = `${finalHeight}px`;
  101.  
  102.             // Calculate the position of the floating window
  103.             const { top, left, width, height } = target.getBoundingClientRect();
  104.             let newTop = top + window.scrollY;
  105.             let newLeft = left + width + window.scrollX;
  106.  
  107.             const viewportWidth = window.innerWidth;
  108.             const viewportHeight = window.innerHeight;
  109.  
  110.             // Adjust the position so it doesn't overflow to the right
  111.             if (newLeft + ventanaFlotante.offsetWidth > viewportWidth) {
  112.                 newLeft = left - ventanaFlotante.offsetWidth + window.scrollX;
  113.             }
  114.  
  115.             // Adjust the position so it doesn't overflow to the bottom
  116.             if (newTop + ventanaFlotante.offsetHeight > viewportHeight + window.scrollY) {
  117.                 newTop = top + height + window.scrollY - ventanaFlotante.offsetHeight;
  118.             }
  119.  
  120.             // Adjust the position so it doesn't overflow to the top
  121.             if (newTop < window.scrollY) {
  122.                 newTop = window.scrollY;
  123.             }
  124.  
  125.             // Adjust the position so it doesn't overflow to the bottom
  126.             if (newTop + ventanaFlotante.offsetHeight > viewportHeight + window.scrollY) {
  127.                 newTop = viewportHeight + window.scrollY - ventanaFlotante.offsetHeight;
  128.             }
  129.  
  130.             ventanaFlotante.style.top = `${newTop}px`;
  131.             ventanaFlotante.style.left = `${newLeft}px`;
  132.         };
  133.         img.src = imgSrc;
  134.     };
  135.  
  136.     // Hide the floating window
  137.     const ocultarVentanaFlotante = () => {
  138.         ventanaFlotante.style.display = 'none';
  139.     };
  140.  
  141.     // Detect images
  142.     const detectarImagenes = () => {
  143.         const elements = document.querySelectorAll('img, [style*="background-image"]');
  144.         elements.forEach((target) => {
  145.             if (target.tagName === 'IMG') {
  146.                 target.addEventListener('mouseenter', ampliarImagen);
  147.                 target.addEventListener('mouseleave', ocultarVentanaFlotante);
  148.             } else if (target.style.backgroundImage) {
  149.                 target.addEventListener('mouseenter', ampliarImagen);
  150.                 target.addEventListener('mouseleave', ocultarVentanaFlotante);
  151.             }
  152.         });
  153.     };
  154.  
  155.     // Call the function to detect images
  156.     detectarImagenes();
  157.  
  158.     // Add a mutation observer to detect dynamically added images or background elements
  159.     const observer = new MutationObserver(detectarImagenes);
  160.     observer.observe(document.body, { childList: true, subtree: true });
  161. })();