Plugin ZooMove jQuery để thu phóng hình ảnh trên Hover

Nếu bạn đã từng duyệt một trang web thương mại điện tử, bạn có thể thấy hiệu ứng phóng to hình ảnh. Bạn di chuột một bức ảnh sản phẩm và một phần của hình ảnh sẽ phóng to cho một nhìn rõ hơn.

Các Plugin ZooMove là một cách tuyệt vời để nhân rộng hiệu ứng này trên trang web của bạn. nó là được cung cấp bởi jQuery, vì vậy bạn có thể tải nó lên và chạy nhanh mà không cần nhiều mã.

ZooMove hoàn toàn miễn phí và là nguồn mở, có sẵn trên GitHub cho bất kỳ nhà phát triển tò mò. Nó có thể được cài đặt thông qua chiều, Cung cấp, Sợi, hoặc tải trực tiếp từ CDNJ.

Để thiết lập hình ảnh ZooMove, bạn sẽ cần ba tập tin cụ thể trong tiêu đề trang của bạn:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Cả hai tập tin ZooMove có thể được giảm thiểu nếu bạn muốn tải trang nhanh hơn. Bạn cũng có thể kết hợp tệp CSS vào biểu định kiểu chính của mình nếu điều đó dễ dàng hơn.

Tất cả các phép thuật thực sự xảy ra trong HTML nơi bạn có thể đặt HTML5 dữ liệu- * thuộc tính cho các hiệu ứng khác nhau.

Điều này cho phép bạn chế tạo hiệu ứng thu phóng tùy chỉnh riêng dựa trên bốn thông số khác nhau:

1. quy mô sở thú dữ liệu - định nghĩa tổng kích thước thu phóng khi di chuột (ví dụ: 2.0 cho 200%)
2. dữ liệu sở thú-di chuyển - xác định xem hình ảnh di chuyển cùng với con trỏ
3. dữ liệu sở thú-hơn - xác định hình ảnh thu phóng xuất hiện trên bản gốc
4. data-zoo-con trỏ - định nghĩa điểm con trỏ

Tham số thứ năm cuối cùng cho phép bạn xác định những gì URL hình ảnh mới nên (nếu cần).

Bạn có thể sử dụng ZooMove trong tất cả các trình duyệt chính, bao gồm IE9 +. Plugin này là được hỗ trợ rộng rãi và nó cung cấp một trải nghiệm người dùng.

Nếu bạn đang tìm kiếm một thư viện di chuột để phóng to đơn giản ZooMove là một lựa chọn tuyệt vời. nó là đủ nhẹ để chạy trên bất kỳ trang web nào và nó được cung cấp bởi jQuery, vì vậy bạn sẽ không cần phải viết nhiều mã để nó hoạt động.

Truy cập trang chính để xem nó hoạt động và xem tài liệu trên GitHub để tìm hiểu thêm.