Zoom on Hover enlarges images when you hover over them.
目前為
// ==UserScript==
// @name Zoom on Hover
// @name:es Zoom on Hover
// @version 1.0
// @description Zoom on Hover enlarges images when you hover over them.
// @description:es Zoom on Hover amplía las imágenes cuando pasas el cursor sobre ellas
// @author Adam Jensen
// @match *://*/*
// @grant GM_addStyle
// @license MIT
// @namespace https://greasyfork.org/users/1398884
// ==/UserScript==
(function() {
'use strict';
// Estilos
GM_addStyle(`
.ampliar-img-flotante {
position: absolute;
z-index: 9999;
border: 2px solid #ccc;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
display: none;
overflow: hidden;
padding: 5px;
pointer-events: none;
/* Eliminada la transición para evitar el "parpadeo" */
}
.ampliar-img-flotante img {
width: 100%;
height: 100%;
object-fit: contain; /* Mantener la relación de aspecto sin recorte */
}
`);
// Crear la ventana flotante
const ventanaFlotante = document.createElement('div');
ventanaFlotante.classList.add('ampliar-img-flotante');
const imagenFlotante = document.createElement('img');
ventanaFlotante.appendChild(imagenFlotante);
document.body.appendChild(ventanaFlotante);
// Función para ampliar la imagen
const ampliarImagen = (event) => {
const img = event.target;
if (img.tagName !== 'IMG' || img.width < 50 || img.height < 50 || img.src.includes('youtube.com') || img.src.includes('gstatic.com')) {
return; // No ampliar si es un logo de YouTube o una imagen pequeña
}
// Crear una nueva imagen para cargarla
const imagenPrevia = new Image();
imagenPrevia.src = img.src;
// Esperamos a que la imagen se cargue
imagenPrevia.onload = () => {
// Ajustar el tamaño del contenedor flotante según las dimensiones de la imagen
const imageAspectRatio = imagenPrevia.width / imagenPrevia.height;
const containerAspectRatio = ventanaFlotante.offsetWidth / ventanaFlotante.offsetHeight;
if (imageAspectRatio > containerAspectRatio) {
// Si la imagen es más ancha que el contenedor, ajustamos el ancho
ventanaFlotante.style.width = `${Math.min(imagenPrevia.width, 600)}px`;
ventanaFlotante.style.height = 'auto';
} else {
// Si la imagen es más alta que ancha, ajustamos la altura
ventanaFlotante.style.height = `${Math.min(imagenPrevia.height, 600)}px`;
ventanaFlotante.style.width = 'auto';
}
// Asignar la imagen al contenedor flotante y mostrarla
imagenFlotante.src = img.src;
ventanaFlotante.style.display = 'block';
// Calcular la posición de la ventana flotante
const { top, left, width, height } = img.getBoundingClientRect();
let newTop = top + window.scrollY;
let newLeft = left + width + 10 + window.scrollX;
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
// Ajustar la posición para que no se salga por la derecha
if (newLeft + ventanaFlotante.offsetWidth > viewportWidth) {
newLeft = left - ventanaFlotante.offsetWidth - 10 + window.scrollX;
}
// Ajustar la posición para que no se salga por la parte inferior
if (newTop + ventanaFlotante.offsetHeight > viewportHeight + window.scrollY) {
newTop = top + height + window.scrollY - ventanaFlotante.offsetHeight - 10;
}
// Ajustar la posición para que no se salga por la parte superior
if (newTop < window.scrollY) {
newTop = window.scrollY + 10;
}
ventanaFlotante.style.top = `${newTop}px`;
ventanaFlotante.style.left = `${newLeft}px`;
};
};
// Ocultar ventana flotante
const ocultarVentanaFlotante = () => {
ventanaFlotante.style.display = 'none';
};
// Detectar imágenes en la página
const detectarImagenes = () => {
const images = document.querySelectorAll('img'); // Sólo imágenes <img> (no background-image)
images.forEach((img) => {
if (img.tagName === 'IMG') {
img.addEventListener('mouseenter', ampliarImagen);
img.addEventListener('mouseleave', ocultarVentanaFlotante);
}
});
};
// Llamar a la función para detectar imágenes
detectarImagenes();
// Añadir un observador de cambios en el DOM para detectar imágenes dinámicas
const observer = new MutationObserver(detectarImagenes);
observer.observe(document.body, { childList: true, subtree: true });
})();