Zoom de imagen & panorámica al desplazar el cursor-vista de detalle

Vista prévia

Descripción

Vista de detalle es un enfoque de JavaScript vainilla para acercar y panoramizar una imagen al desplazar el mouse.

Funcionamiento

Añada la imagen como fondo al elemento con la clase ' detail-View '.

<div class="detail-view" style="background-image: url(image.jpg);"></div>

Obtenga todas las imágenes con la clase ' detail-View '.

var zoomBoxes = document.querySelectorAll('.detail-view');

El principal JavaScript para activar el zoom de la imagen & funciones de panorámica.

// Extract the URL
zoomBoxes.forEach(function(image) {

var imageCss = window.getComputedStyle(image, false),


imageUrl = imageCss.backgroundImage











 .slice(4, -1).replace(/['"]/g, '');


// Get the original source image

var imageSrc = new Image();

imageSrc.onload = function() {


var imageWidth = imageSrc.naturalWidth,




imageHeight = imageSrc.naturalHeight,




ratio = imageHeight / imageWidth;



// Adjust the box to fit the image and to adapt responsively


var percentage = ratio * 100 + '%';


image.style.paddingBottom = percentage;



// Zoom and scan on mousemove


image.onmousemove = function(e) {



// Get the width of the thumbnail



var boxWidth = image.clientWidth,





// Get the cursor position, minus element offset





x = e.pageX - this.offsetLeft,





y = e.pageY - this.offsetTop,





// Convert coordinates to % of elem. width & height





xPercent = x / (boxWidth / 100) + '%',





yPercent = y / (boxWidth * ratio / 100) + '%';




// Update styles w/actual size



Object.assign(image.style, {




backgroundPosition: xPercent + ' ' + yPercent,




backgroundSize: imageWidth + 'px'



});


};



// Reset when mouse leaves


image.onmouseleave = function(e) {



Object.assign(image.style, {




backgroundPosition: 'center',




backgroundSize: 'cover'



});


};

}

imageSrc.src = imageUrl;
});