Cách để zoom ảnh chỉ với Javascript và CSS thuần

Khi xây dựng một website bán hành điện tử, giới thiệu sản phẩm... ta luôn muốn sử dụng thật nhiều ảnh đẹp có độ chi tiết cao để gửi đến khách hàng những góc nhìn chi tiết nhất về sản phẩm.

Tôi tin rằng phần lớn các website bán hàng đều có khả năng zoom vào các ảnh giới thiệu sản phẩm. Tất cả chúng đều sử dụng các plugin của jQuery ví dụ như jQuery Zoom hay EasyZoom

Nhưng thực sự để làm được điều này không nhất thiết cần phải có sự hỗ trợ của jQuery. Dưới đây tôi sẽ trình bày từng bước việc implement một thư viện zoom ảnh đơn giản mà không cần sử dụng đến jQueryL

Bắt đầu với một thẻ HTML:

<figure class="zoom" style="background: image.jpg" onmousemove="zoom(event)">
    <img src="image.jpg">
</figure>

Ở đây ta đặt ảnh nhỏ của sản phẩm làm background cùng với ảnh chính trong thẻ <img>, hai ảnh này là một và đều chưa được zoom. Sau đó ta sẽ đưa ảnh zoom lên bằng cách ẩn ảnh gốc đi và hiện ảnh nền đã được zoom cùng với tọa độ dựa trên vị trí con chuột.

Để thực hiện ta cần có CSS:

figure.zoom {
  background-position: 50% 50%;
  position: relative;
  width: 500px;
  overflow: hidden;
  cursor: zoom-in;
}

figure.zoom img:hover {
  opacity: 0;
}

figure.zoom img {
  transition: opacity 0.5s;
  display: block;
  width: 100%;
}

Cùng với phần script định nghĩa hàm zoom:

function zoom(event){
  var zoomer = event.currentTarget;
  x = event.offsetX/zoomer.offsetWidth*100;
  y = event.offsetY/zoomer.offsetHeight*100;
  zoomer.style.backgroundPosition = x + '% ' + y + '%';
}

Hàm này có thể chạy tốt trên desktop, nếu muốn chạy được trên cả mobile ta chỉ cần bắt thêm sự kiện ontouchmove:

<figure class='zoom' style="background: image.jpg" onmousemove="zoom(event)" ontouchmove="zoom(event)">
    <img src="image.jpg">
</figure>

Và xử lý với tọa độ được cung cấp từ touch event:

function zoom(e){
  var zoomer = e.currentTarget;
  e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX
  e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX
  x = offsetX/zoomer.offsetWidth*100
  y = offsetY/zoomer.offsetHeight*100
  zoomer.style.backgroundPosition = x + '% ' + y + '%';
}

Bây giờ ta đã có một thư viện zoom ảnh không sử dụng jQuery hay một plugin nào khác.

Ngoài ra, ta có thể sửa đổi thêm một chút bằng cách sử dụng tính năng đặt biến của CSS:

figure.zoom {
  --bg-x: 50%;
    --bg-y: 50%;
    background-position: var(--bg-x) var(--bg-y);
  position: relative;
  width: 500px;
  overflow: hidden;
  cursor: zoom-in;
}
figure.zoom img {
  transition: opacity .5s;
  display: block;
    width: 100%;
}
figure.zoom img:hover { opacity: 0; }

Trong phần JavaScript, ta sẽ đặt giá trị cho các biến -bg-x và -bg-y thay vì trực tiếp đặt vị trí background:

function zoom(e){
  var zoomer = e.currentTarget;
  e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX
  e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX
  x = offsetX/zoomer.offsetWidth*100
  y = offsetY/zoomer.offsetHeight*100
  zoomer.style.setProperty('--bg-x', x + '%');
  zoomer.style.setProperty('--bg-y', y + '%');
}

Nếu vì một lý do gì đó mà bạn không thể sử dụng jQuery hoặc không muốn sử dụng thêm plugin cho thư viện Javascipt vốn đã đồ sộ của mình thì mấy hàm nhỏ trên đây là đủ để hoàn thành nhiệm vụ. Hy vọng bài viết này sẽ giúp ích cho các bạn.

Dưới đây là một đoạn code tham khảo: https://jsfiddle.net/xkgs9w7n/3/