Di bawah ini kita akan mempelajari cara membuat zoom image. Zoom image adalah gambar yang akan diperbesar ketika kita mengarahkan kursor ke gabar.
Zoom Image
Arahkan mouse ke gambar:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * {box-sizing: border-box;} .img-zoom-container { position: relative; } .img-zoom-lens { position: absolute; border: 1px solid #d4d4d4; /*atur ukuran lensa:*/ width: 40px; height: 40px; } .img-zoom-result { border: 1px solid #d4d4d4; /*mengatur ukuran div hasil:*/ width: 300px; height: 300px; } </style> <script> function imageZoom(imgID, resultID) { var img, lens, result, cx, cy; img = document.getElementById(imgID); result = document.getElementById(resultID); /*buat lensa:*/ lens = document.createElement("DIV"); lens.setAttribute("class", "img-zoom-lens"); /*insert lens:*/ img.parentElement.insertBefore(lens, img); /*hitung rasio antara hasil DIV dan lensa:*/ cx = result.offsetWidth / lens.offsetWidth; cy = result.offsetHeight / lens.offsetHeight; /*mengatur properti latar belakang(background) untuk hasil DIV:*/ result.style.backgroundImage = "url('" + img.src + "')"; result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px"; /*menjalankan fungsi saat seseorang menggerakkan kursor ke atas gambar atau lensa:*/ lens.addEventListener("mousemove", moveLens); img.addEventListener("mousemove", moveLens); /*dan juga untuk layar sentuh:*/ lens.addEventListener("touchmove", moveLens); img.addEventListener("touchmove", moveLens); function moveLens(e) { var pos, x, y; /*mencegah tindakan lain yang mungkin terjadi saat memindahkan gambar:*/ e.preventDefault(); /*dapatkan posisi x dan y kursor:*/ pos = getCursorPos(e); /*hitung posisi lensa:*/ x = pos.x - (lens.offsetWidth / 2); y = pos.y - (lens.offsetHeight / 2); /*mencegah lensa diposisikan di luar gambar:*/ 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;} /*atur posisi lensa:*/ lens.style.left = x + "px"; lens.style.top = y + "px"; /*tampilkan apa yang "dilihat" oleh lensa:*/ result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px"; } function getCursorPos(e) { var a, x = 0, y = 0; e = e || window.event; /*dapatkan posisi x dan y dari gambar:*/ a = img.getBoundingClientRect(); /* hitung koordinat x dan y kursor, relatif terhadap gambar:*/ x = e.pageX - a.left; y = e.pageY - a.top; /*pertimbangkan scrolling halaman apa pun:*/ x = x - window.pageXOffset; y = y - window.pageYOffset; return {x : x, y : y}; } } </script> </head> <body> <h1>Image Zoom</h1> <p>Arahkan mouse ke gambar:</p> <div class="img-zoom-container"> <img id="myimage" src="https://dosenit.com/wp-content/uploads/2021/01/S3_EP11_Hachiman_Yukino_1.png" width="300" height="240"> <div id="myresult" class="img-zoom-result"></div> </div> <p> Gambar harus ditempatkan di dalam container dengan posisi relatif. </p> <p> Hasilnya bisa diletakkan di mana saja pada halaman, tetapi harus memiliki nama kelas "img-zoom-result". </p> <p> Pastikan gambar dan hasilnya memiliki ID. ID ini akan digunakan saat javaScript memulai efek zoom. </p> <script> // Mulai efek zoom: imageZoom("myimage", "myresult"); </script> </body> </html>
Buat Zoom Gambar
Langkah 1) Tambahkan HTML:
Contoh
<div class="img-zoom-container"> <img id="myimage" src="https://dosenit.com/wp-content/uploads/2021/01/S3_EP11_Hachiman_Yukino_1.png" width="300" height="240"> <div id="myresult" class="img-zoom-result"></div> </div>
Langkah 2) Tambahkan CSS:
Penampung harus memiliki pemosisian “relatif”.
Contoh
* {box-sizing: border-box;}
.img-zoom-container {
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*atur ukuran lensa:*/
width: 40px;
height: 40px;
}
.img-zoom-result {
border: 1px solid #d4d4d4;
/*mengatur ukuran div hasil:*/
width: 300px;
height: 300px;
}Langkah 3) Tambahkan JavaScript:
Contoh
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/*buat lensa:*/
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
/*insert lens:*/
img.parentElement.insertBefore(lens, img);
/*hitung rasio antara hasil DIV dan lensa:*/
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
/*mengatur properti latar belakang(background) untuk hasil DIV:*/
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/*menjalankan fungsi saat seseorang menggerakkan kursor ke atas gambar atau lensa:*/
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/*dan juga untuk layar sentuh:*/
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
function moveLens(e) {
var pos, x, y;
/*mencegah tindakan lain yang mungkin terjadi saat memindahkan gambar:*/
e.preventDefault();
/*dapatkan posisi x dan y kursor:*/
pos = getCursorPos(e);
/*hitung posisi lensa:*/
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
/*mencegah lensa diposisikan di luar gambar:*/
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;}
/*atur posisi lensa:*/
lens.style.left = x + "px";
lens.style.top = y + "px";
/*tampilkan apa yang "dilihat" oleh lensa:*/
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/*dapatkan posisi x dan y dari gambar:*/
a = img.getBoundingClientRect();
/* hitung koordinat x dan y kursor, relatif terhadap gambar:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*pertimbangkan scrolling halaman apa pun:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
}Langkah 4) Mulai Efek Zoom:
Contoh
<script>
// Mulai efek zoom:
imageZoom("myimage", "myresult");
</script>