Phóng to ảnh bằng javascript

Đã đăng vào thg 8 26, 2017 3:17 SA 2 phút đọc

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:

Ở đây ta đặt ảnh nhỏ của sản phẩm làm background cùng với ảnh chính trong thẻ

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: //jsfiddle.net/xkgs9w7n/3/

All rights reserved