Khái quát
Trong lập trình web đặc biệt là đối với các website bán hàng điện tử, việc giới thiệu sản phẩm bằng những hình ảnh đẹp mắc với độ chi tiết cao sẽ giúp cho khách hàng dể dàng nhìn kĩ được các chi tiết nhỏ của sản phẩm từ đó nắm bắt đươc nhiều thông tin hơn.
Hiện tại đa phần các website bán hàng đều có chức năng zoom ảnh để phóng to các hình ảnh, tuy nhiên đa phần tất cả chúng đều được nhúng các blugin như Jquery Zoom hoặc EasyZoom.
Trên thực tế chúng ta hoàn toàn có thể xây dựng chức năng zoom ảnh đơn giản chỉ với Javascript và CSS mà không cần dùng thêm bất kì một thư viện nào. Việc chúng ta cần đó là hình dung ra nguyên lí hoạt động của chức năng zoom ảnh sau đó tiến hành triển khai nó bằng HTML CSS và Javascript.
Triển khai
Chúng ta sẽ bắt đầu vói một thẻ HTML:
Class zoom chính là phần tử chứa hình ảnh cần zoom. Hình ảnh đầu tiên trong thẻ <img> được sử dụng để làm hình ảnh nguyên bản, hình ảnh thứ hai trong thẻ <img> sẽ được dùng để tạo ra hiệu ứng zoom hình ảnh.
Tiếp đến là CSS:
Với thẻ <img> bên trong class zoom sẽ được xác định sẳn có chiều rộng width là 500px. Class zoom sẽ được khai báo chiều rộng vừa bằng với chiều dài nội dung bên trong.
Đối với hình ảnh thứ hai tức img:nth-child(2) sử dụng thuộc tính position để nó nằm đè lên hình trước đó, đồng thời phóng to bức hình này lên một chấm năm lần so với kích thước ban đầu (scale(1.5)).
Tiếp tục với CSS trong class zoom mình tiến hành khai báo các biến để hình ảnh thứ hai trong thẻ <img> có thể sử dụng được.
Thuộc tính clip-path sẽ tạo ra một vùng cắt để hiển thị nội dung trong phạm vi chỉ định, cicle là vùng cắt ình tròn có đường kính 100px và tọa độ mặc định được khai báo ban đầu là cách left 50%, cách top 50%. Mục đích sử dụng thuộc tính clip-path đó là khi người dùng hover vào hình ảnh một thì sẽ lập tức tạo ra một hình cắt có kích thước lớn hơn tại vị trí tương ứng. Để dể dàng quản lý các giá trị này ta đặt hết chúng vào các biến.
Bây giờ việc của chúng ta là thay đổi các giá trị của biến sao cho phù hợp với vị trí hover chuột là sẽ hoàn tất tạo ra chức năng zoom hình ảnh với Javascript.
Ta gọi lại class zoom bên HTML với querySelector, addEventlistener là trình lắng nghe khi có sự kiện gì đó sảy ra, mousemove là sự kiện người dùng rê chuột vào phần tử.
Đầu tiên ta cần thay đổi giá trị của biến --zoom-show thành một để hiển thị hình ảnh zoom lên, sau đó tiến hành đi tính toán vị trí của x và y của thẻ zoom, với:
- Biến event.x là vị trí trỏ chuột tính từ đầu màn hình bên trái.
- Biến zoom.getBoundingClientRect().left là khoảng cách của thẻ zoom với lề bên trái màn hình.
- Biến positionPx là vị trí cách left của con trỏ chuột tình từ bờ bên trái của thẻ zoom.
- Biến zoom.offsetWidth là chiều dài của thẻ zoom.
- Biến positionX là kết quả sau khi chuyển đổi positionPx về đơn vị phần trăm.
- Biến positionY là vị trí cách top của con trỏ tính theo đơn vị phần trăm.
Tiến hành gán hai giá trị vừa tìm được vào hai biến ám chỉ vị trí cách top và left của clip-path. Vậy là từ giờ mỗi khi hover chuột vào bức hình hệ thống sẽ zoom bức ảnh thứ hai lên và cắt nó theo vị trí đã được tính toán.
Cuối cùng mỗi khi người dùng chi chuột ra khỏi vị trí của tấm hình, ta bắt sự kiện này với thuộc tính mouseout, tiến hành ẩn hình ảnh được zoom đi.
Kết quả mình họa cho đoạn code trên:
Trên thực tế bạn hoàn toàn có thể sử dụng thư viện để tạo ra chức năng zoom một cách nhanh chóng, tuy nhiên là một coder chúng ta dùng thư viện là để nhanh hơn, bản thân chúng ta phải hiểu nó đang hoạt động như thế nào.
Sau cùng việc chỉ tốn tài dòng CSS và Javascript đã có thể tạo ra chức năng zoom ảnh lạ một lựa chọn không tồi khi so sánh với việc nhúng các thứ viện vào website khiến trang web trở nên nặng hơn.