Cách xây dựng kính lúp hình ảnh với Vanilla JavaScript
Nếu bạn đã từng duyệt qua một trang web mua sắm, có lẽ bạn đã bắt gặp tính năng phóng đại hình ảnh. Nó cho phép bạn phóng to một phần cụ thể của hình ảnh để xem kỹ hơn. Việc kết hợp tính năng nhỏ nhưng có tác động này có thể nâng cao đáng kể trải nghiệm người dùng trên trang web của riêng bạn.
Xây dựng một kính lúp hình ảnh một cách liền mạch và gắn kết có thể là một thách thức. Tuy nhiên, thực hiện qua các bước này sẽ giúp bạn tạo kính lúp hình ảnh của riêng mình từ đầu mà không cần phải dựa vào plugin của bên thứ ba.
Mục Lục
Khi nào nên sử dụng Công cụ phóng to hình ảnh trong Dự án web của bạn
Kính lúp hình ảnh có thể hữu ích khi bạn đang xây dựng một dự án có nhiều hình ảnh. Như đã đề cập trước đó, kính lúp hình ảnh rất phổ biến trên các trang web mua sắm vì đôi khi người dùng có thể cần xem kỹ sản phẩm trước khi quyết định xem nó có đáng mua hay không.
Khách hàng chỉ dựa vào thông tin và hình ảnh do trang web cung cấp để đánh giá chất lượng, tính năng và hình thức của sản phẩm. Tuy nhiên, không phải lúc nào hình ảnh tĩnh cũng có thể cung cấp đủ độ rõ ràng hoặc cho phép đánh giá toàn diện về mặt hàng đó.
Trong các cửa hàng truyền thống, khách hàng có thể cầm trên tay các sản phẩm, xem xét kỹ lưỡng và đánh giá mức độ phù hợp của chúng trước khi mua. Công cụ phóng đại hình ảnh cố gắng tạo lại trải nghiệm này bằng cách cung cấp cho người dùng mức độ xem xét và kiểm tra ảo tương tự.
Kính lúp hình ảnh cũng có thể hữu ích nếu bạn đang xây dựng ứng dụng thư viện ảnh vì phóng to một phần cụ thể của hình ảnh là một tính năng quan trọng.
Xây dựng kính lúp hình ảnh
Mã được sử dụng trong dự án này có sẵn trong kho lưu trữ GitHub và bạn được sử dụng miễn phí theo giấy phép MIT.
Tạo một thư mục và trong thư mục đó, thêm một index.html tài liệu, phong cách.css tập tin và chính.js tài liệu. Thêm mã soạn sẵn này vào index.html:
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Magnifier</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
Bên trong thân hình thẻ, hãy tạo một phần tử div với tên lớp là “tiêu đề”. Sau đó, trong div “tiêu đề”, hãy thêm một h1 phần tử tiêu đề để hiển thị tiêu đề của kính lúp hình ảnh của bạn.
Bạn có thể tùy chỉnh văn bản cho phù hợp với nhu cầu của bạn. Tiếp theo, bao gồm hai phần tử span cung cấp hướng dẫn sử dụng kính lúp và hiển thị mức thu phóng hiện tại cho người dùng.
Sau phần tiêu đề, hãy tạo một div phần tử có tên lớp là “container”. Bên trong div này, thêm một phần tử div khác với tên lớp là “kính lúp” và áp dụng lớp “hidden” để ẩn nó khỏi chế độ xem.
Phần tử này sẽ đại diện cho hình ảnh kính lúp. Sau đó, thêm thẻ tập lệnh có thuộc tính “src” được đặt thành “/main.js”.
<body>
<div class="header">
<h1>Image Magnifier</h1> <span>Press <strong>Arrow Up</strong> or <strong>Arrow Down</strong> to
increase or decrease athe zoom level.</span>
<span>Zoom Level: <strong class="zoom-level">1</strong></span>
</div>
<div class="container">
<div class="magnifier hidden"></div>
</div>
<script src="/main.js"></script>
</body>
Thay thế mã trong phong cách.css tập tin với những điều sau đây. Bạn cũng có thể sử dụng bộ tiền xử lý CSS như Ít hơn nếu muốn:
:root {
--magnifier-width: 150;
--magnifier-height: 150;
}body {
display: flex;
flex-direction: column;
align-items: center;
}
.container {
width: 400px;
height: 300px;
background-size: cover;
background-image: url("https://cdn.pixabay.com/photo/2019/03/27/15/24/animal-4085255_1280.jpg");
background-repeat: no-repeat;
position: relative;
cursor: none;
}
.magnifier {
border-radius: 400px;
box-shadow: 0px 11px 8px 0px #0000008a;
position: absolute;
width: calc(var(--magnifier-width) * 1px);
height: calc(var(--magnifier-height) * 1px);
cursor: none;
background-image: url("https://cdn.pixabay.com/photo/2019/03/27/15/24/animal-4085255_1280.jpg");
background-repeat: no-repeat;
}
span {
display: block;
}
.header {
display: flex;
flex-direction: column;
align-items: center;
}
.hidden {
visibility: hidden;
}
div > span:nth-child(3) {
font-size: 20px;
}
bên trong chính.js tệp, truy xuất các phần tử HTML có tên lớp, “kính lúp” và “bộ chứa” bằng cách sử dụng tài liệu.querySelector phương thức và gán chúng cho các biến kính lúp Và thùng đựng hàngtương ứng.
Sau đó, sử dụng getComputingStyle chức năng truy xuất chiều rộng Và chiều cao của phần tử kính lúp và sau đó trích xuất các giá trị số từ các chuỗi được trả về bằng cách sử dụng chuỗi con Và Chỉ số các phương pháp.
Gán chiều rộng được trích xuất cho biến kính lúpChiều rộngvà chiều cao trích xuất để kính lúpChiều cao.
let magnifier = document.querySelector(".magnifier");
let container = document.querySelector(".container");let magnifierWidth = getComputedStyle(magnifier).width.substring(
0,
getComputedStyle(magnifier).width.indexOf("p")
);
let magnifierHeight = getComputedStyle(magnifier).width.substring(
0,
getComputedStyle(magnifier).height.indexOf("p")
);
Tiếp theo, thiết lập các biến cho mức thu phóng, mức thu phóng tối đa và vị trí của con trỏ và hình ảnh kính lúp.
let zoomLevelLabel = document.querySelector(".zoom-level");
let zoom = 2;
let maxZoomLevel = 5;
let pointerX;
let pointerY;
let magnifyX;
let magnifyY;
Trong khối mã trên, con trỏX Và con trỏY cả hai đều đại diện cho vị trí của con trỏ dọc theo trục X và Y.
Bây giờ, hãy xác định hai hàm trợ giúp: getZoomLevel trả về mức thu phóng hiện tại và getPointerPosition trả về một đối tượng với x Và y tọa độ của con trỏ.
function getZoomLevel() {
return zoom;
}function getPointerPosition() {
return { x: pointerX, y: pointerY }
}
Tiếp theo, tạo thêm một cập nhậtMagImage chức năng tạo một đối tượng MouseEvent mới với vị trí con trỏ hiện tại và gửi nó đến phần tử vùng chứa. Chức năng này chịu trách nhiệm cập nhật hình ảnh kính lúp.
function updateMagImage() {
let evt = new MouseEvent("mousemove", {
clientX: getPointerPosition().x,
clientY: getPointerPosition().y,
bubbles: true,
cancelable: true,
view: window,
}); container.dispatchEvent(evt);
}
Bây giờ, bạn nên thêm trình lắng nghe sự kiện vào đối tượng cửa sổ cho sự kiện “keyup” điều chỉnh mức thu phóng khi người dùng nhấn phím “ArrowUp” hoặc “ArrowDown”.
Hàm gọi lại trong sự kiện “keyup” cũng chịu trách nhiệm cập nhật nhãn mức thu phóng và kích hoạt cập nhậtMagImage chức năng.
window.addEventListener("keyup", (e) => {
if (e.key === "ArrowUp" && maxZoomLevel - Number(zoomLevelLabel.textContent) !== 0) {
zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
zoom = zoom + 0.3;
updateMagImage();
} if (e.key === "ArrowDown" && !(zoomLevelLabel.textContent <= 1)) {
zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
zoom = zoom - 0.3;
updateMagImage();
}
});
Sau đó, thêm trình xử lý sự kiện vào phần tử vùng chứa cho sự kiện “mousemove”.
Trong chức năng gọi lại, hãy thêm chức năng loại bỏ lớp “ẩn” khỏi thành phần kính lúp để làm cho nó hiển thị và tính toán vị trí chuột so với vùng chứa, có tính đến việc cuộn trang.
Hàm này cũng sẽ đặt kiểu biến đổi của kính lúp thành vị trí được tính toán và xác định kích thước nền cũng như vị trí của hình ảnh kính lúp dựa trên mức thu phóng và vị trí chuột.
container.addEventListener("mousemove", (e) => {
magnifier.classList.remove("hidden");
let rect = container.getBoundingClientRect();
let x = e.pageX - rect.left;
let y = e.pageY - rect.top; x = x - window.scrollX;
y = y - window.scrollY;
magnifier.style.transform = `translate(${x}px, ${y}px)`;
const imgWidth = 400;
const imgHeight = 300;
magnifier.style.backgroundSize =
imgWidth * getZoomLevel() + "px " + imgHeight * getZoomLevel() + "px";
magnifyX = x * getZoomLevel() + 15;
magnifyY = y * getZoomLevel() + 15;
magnifier.style.backgroundPosition = -magnifyX + "px " + -magnifyY + "px";
});
Sau đó, thêm một trình xử lý sự kiện khác vào phần tử vùng chứa, nhưng lần này trình xử lý sự kiện sẽ lắng nghe sự kiện “mouseout” và thêm lớp “ẩn” trở lại phần tử kính lúp bất cứ khi nào chuột ra khỏi vùng chứa.
container.addEventListener("mouseout", () => {
magnifier.classList.add("hidden");
});
Cuối cùng, thêm một trình lắng nghe sự kiện vào đối tượng cửa sổ cho sự kiện “mousemove” để cập nhật vị trí x và y của con trỏ.
window.addEventListener("mousemove", (e) => {
pointerX = e.clientX;
pointerY = e.clientY;
});
Đó là nó! Bạn đã quản lý để xây dựng một kính lúp hình ảnh với vanilla JavaScript.
Cách kính lúp hình ảnh cải thiện trải nghiệm người dùng
Bằng cách cho phép người dùng phóng to các khu vực cụ thể của hình ảnh, kính lúp cho phép họ kiểm tra chi tiết sản phẩm rõ ràng hơn.
Mức độ khám phá trực quan nâng cao này tạo niềm tin cho người dùng vì họ có thể đưa ra quyết định sáng suốt. Điều này có thể góp phần tăng tỷ lệ chuyển đổi và cải thiện khả năng giữ chân khách hàng.