Vergrößern Sie das Bild bei Hover mit Javascript

Ich bin neu mit JS.Vergrößern Sie das Bild bei Hover mit Javascript

https://codepen.io/Maartinshh/pen/VbGOvm

Hier ist mein Code:

html

<img id="imgZoom" width="200px" height="200px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAA20AAAAJDZhZjAwOTE3LTExMDQtNDE5OC05NDdhLWUxYTU0ODJiZTdkYQ.png"> 
<div id="overlay" onmousemove="zoomIn(event)"></div>

css

#overlay { 
    border: 1px solid black; 
    width: 450px; 
    height: 450px; 
    position: absolute; 
    display: inline-block; 
    background-image: url('https://media.licdn.com/mpr/mpr/shrink_200_200/AAEAAQAAAAAAAA20AAAAJDZhZjAwOTE3LTExMDQtNDE5OC05NDdhLWUxYTU0ODJiZTdkYQ.png'); 
    background-repeat: no-repeat; 
}

function zoomIn(event) { 
    var element = document.getElementById("overlay"); 
    element.style.display = "inline-block"; 
    var img = document.getElementById("imgZoom"); 
    var posX = event.offsetX ? (event.offsetX) : event.pageX - img.offsetLeft; 
    var posY = event.offsetY ? (event.offsetY) : event.pageY - img.offsetTop; 
    element.style.backgroundPosition = (-posX * 1) + "px " + (-posY * 1) + "px"; 

} 

function zoomOut() { 
    var element = document.getElementById("overlay"); 
    element.style.display = "none"; 
}

Problem, das auftritt: Wenn Sie sehen, wenn ich dann Bild auf der linken Seite Mouseover, die rechte Seite (gezoomt) Bild, folgt nicht wirklich korrekt mit Zoom. Was mache ich falsch?

Wie kann ich den Zoomfaktor ändern (Zoom näher)?

Vielen Dank im Voraus.

Quelle

2017-05-18 PeterPakla

Auf den ersten Blick bearbeitet Offset hinzufügen, ich bin zu bemerken, dass 'event.offsetX? (event.offsetX): event.pageX - img.offsetLeft' wird 'event.pageX - img.offsetLeft' ausführen, wenn' event.offsetX' '0' ist. Könnte es das sein? Wenn ja, sollten Sie es in 'type of event.offsetX ===" number "ändern? event.offsetX: event.pageX - img.offsetLeft' –

@MikaelLennholm Entschuldigung, ich habe Ihre Idee nicht verstanden. Vielleicht können Sie versuchen, es als Antwort zu posten (so ist es einfacher zu sehen/zu verstehen)? Außerdem habe ich den rechten Container bearbeitet, in dem das gezoomte Bild angezeigt wird. Gerade jetzt, ich bekomme gezoomtes Bild in der Seite des Containers ... Wie kann ich es zentrieren? – PeterPakla

OK, ich mache das, hoffentlich stellt sich heraus, dass es tatsächlich eine Antwort ist. –

Sie müssen einige Berechnungen tun, zusätzliche

var offY = (element.clientHeight -img.clientHeight)/2; 
var offX = (element.clientWidth -img.clientWidth)/2;

in der Mitte des div zu platzieren img codepen here

Quelle

2017-05-18 13:39:51

Vergrößern Sie das Bild bei Hover mit Javascript

Antwort

Verwandte Themen