0
Kann mir jemand erklären, wie man einen Hover-Zoom wie im ersten Beispiel dieser Seite macht http://www.elevateweb.co.uk/image-zoom/examples (nicht mit Code, aber konzeptionell)?Bild vergrößern JavaScript
A
Antwort
-1
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<title>jQuery elevateZoom Demo</title>
<script src='jquery-1.8.3.min.js'></script>
<script src='jquery.elevatezoom.js'></script>
</head>
<body>
<h1>Basic Zoom Example</h1>
<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
<br />
see more examples online <a href="http://www.elevateweb.co.uk/image-zoom/examples">http://www.elevateweb.co.uk/image-zoom/examples</a>
<script>
$('#zoom_01').elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
</script>
</body>
</html>
- Import jquery.js
- Import jquery.elevatezoom.js
1
sicher seine Werke wie folgt aus:
HTML
<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
Notieren Sie die zwei Bilder, das src und das Datenzoombild. Einer ist das kleinere Bild, der andere ist der größere.
JAVASCRIPT
$("#zoom_01").elevateZoom();
- See more at: http://www.elevateweb.co.uk/image-zoom/examples#sthash.QKWe4Oou.dpuf
Im Quellcode unter Ihnen, wie die elevateZoom() Funktion funktioniert sehen können. Es ist ziemlich lang, aber straighforeward. Wenn Sie mit der Maus über das Bild fahren, erstellt der Code ein neues Bild, das zur Seite versetzt ist. Dies ist eine Vergrößerung der Position Ihrer Maus. Ziemlich cool!
Source Code: https://github.com/elevateweb/elevatezoom/blob/master/jquery.elevatezoom.js
Dies tut nichts, um die Frage zu beantworten, die ich – JordanHendrix
Danke für answers.What gefragt wurde, nicht verstehen, ist die Beziehung zwischen den Dimensionen des gezoomten Bildes und dem normalen Bild Warum wird der Zoom unvollkommen, wenn ich die Abmessungen des gezoomten Bildes festlege? – Merecol