Hur skapa: Bildzoomning
- Föregående sida Sökbar portfölj
- Nästa sida Bildförstoring
Lär dig hur du skapar bildzoomning.
Bildzoomning
Placera muspekaren över bilden:

Förstoring av förhandsgranskning:
Skapa bildzoomning
Steg 1 - Lägg till HTML:
<div class="img-zoom-container"> <img id="myimage" src="img_girl.jpg" width="300" height="240" alt="Girl"> <div id="myresult" class="img-zoom-result"></div> </div>
Steg 2 - Lägg till CSS:
Container måste ha en "relativ" position.
* {box-sizing: border-box;} .img-zoom-container { position: relative; } .img-zoom-lens { position: absolute; border: 1px solid #d4d4d4; /*ställ in storleken på linsen:*/ width: 40px; height: 40px; } .img-zoom-result { border: 1px solid #d4d4d4; /* Ange storleken på result div: */ width: 300px; height: 300px; }
Tredje steg - Lägg till JavaScript:
function imageZoom(imgID, resultID) { var img, lens, result, cx, cy; img = document.getElementById(imgID); result = document.getElementById(resultID); /* Skapa linsen: */ lens = document.createElement("DIV"); lens.setAttribute("class", "img-zoom-lens"); /* Infoga linsen: */ img.parentElement.insertBefore(lens, img); /* Beräkna proportionen mellan result DIV och linsen: */ cx = result.offsetWidth / lens.offsetWidth; cy = result.offsetHeight / lens.offsetHeight; /* Ställ in bakgrundsegenskaper för result DIV: */ result.style.backgroundImage = "url('" + img.src + "')"; result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px"; /* Kör motsvarande funktion när muspekaren flyttas över bilden eller linsen: */ lens.addEventListener("mousemove", moveLens); img.addEventListener("mousemove", moveLens); /* Även tillämpligt för pekskärm: */ lens.addEventListener("touchmove", moveLens); img.addEventListener("touchmove", moveLens); function moveLens(e) {}} var pos, x, y; /* Förhindra alla andra möjliga åtgärder som kan uppstå när man rör sig över bilden */ e.preventDefault(); /* Hämta pekarens x och y-koordinater: */ pos = getCursorPos(e); /* Beräkna linsens position: */ x = pos.x - (lens.offsetWidth / 2); y = pos.y - (lens.offsetHeight / 2); /* Förhindra att linsen ligger utanför bilden: */ if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;} if (x < 0) {x = 0;} if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;} if (y < 0) {y = 0;} /* Ställ in linsens position: */ lens.style.left = x + "px"; lens.style.top = y + "px"; /* Visa vad linsen ser: */ result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px"; } function getCursorPos(e) { var a, x = 0, y = 0; e = e || window.event; /* Hämta bildens x och y-position: */ a = img.getBoundingClientRect(); /* Beräkna pekarens x och y-koordinater relativt till bilden: */ x = e.pageX - a.left; y = e.pageY - a.top; /* Ta hänsyn till varje sidrullning: */ x = x - window.pageXOffset; y = y - window.pageYOffset; return {x : x, y : y}; } }
Fjärde steg - Initialisera förstoringseffekten:
<script> imageZoom("myimage", "myresult"); </script>
- Föregående sida Sökbar portfölj
- Nästa sida Bildförstoring