5 tập lệnh so sánh hình ảnh miễn phí
Các thanh trượt chồng chéo cho phép bạn so sánh giữa hai hình ảnh, thường là loại trước-sau, với hai hình ảnh được đặt chồng lên nhau. Một thanh trượt có thể được thao tác, người dùng có thể kéo để hiển thị ít hình ảnh trước hơn và nhiều hình ảnh sau hơn và ngược lại.
Đó là cách hoàn hảo cho các kịch bản nhất định như xem hiệu ứng khắc nghiệt của bầu khí quyển sao Hỏa hoặc cách cảnh quan thành phố thay đổi trong nửa thế kỷ.
Đối với các nhà thiết kế, đó cũng là một cách tuyệt vời để phản ánh mức độ thay đổi của một kỹ thuật hoặc phương pháp tiếp cận đối với một hình ảnh gốc. Có nhiều thư viện JS khác nhau mà bạn có thể sử dụng cho mục đích so sánh. Dưới đây là 5 trong số đó.
Hai mươi hai mươi
Hai mươi hai mươi là công cụ trực quan để giúp bạn dễ dàng ghi nhận sự khác biệt giữa hai hình ảnh. Công cụ này sử dụng jQuery và jquery.event.move để hoạt động. Nó rất dễ sử dụng, chỉ cần xếp hai hình ảnh vào một thùng chứa, sau đó gọi Hai mươi hai mươi(); cho container.
Sau đó:
$ ("# container"). fiftoven (); Twentytoven đáp ứng và hoạt động cho tất cả các thiết bị và nếu bạn sử dụng khung Foundation, điều này sẽ hoạt động tốt.
Thuốc bổ
Thuốc bổ giúp bạn so sánh hai phần phương tiện (ảnh hoặc GIF) và giúp bạn dễ dàng làm nổi bật sự thay đổi giữa các hình ảnh theo thời gian. Plugin này dễ sử dụng và hoạt động trên tất cả các thiết bị. Chỉ cần cung cấp hai hình ảnh sau đó gọi plugin với các tùy chọn có sẵn.
Trên các tùy chọn, bạn có thể đặt vị trí bắt đầu thanh trượt, đặt dọc hoặc ngang, thêm nhãn và tín dụng, hình động và hơn thế nữa.
Hãy thử một bản demo dưới đây:
imgSider
imgSider là một plugin jQuery đơn giản để làm thanh trượt so sánh hình ảnh. Việc sử dụng rất đơn giản và dễ dàng: sau khi bao gồm cả JS và CSS của nó, hãy bọc các hình ảnh trong div bằng trái lớp học cho trước hình ảnh, và đúng lớp học cho sau hình ảnh, sau đó kích hoạt nó bằng cách gọi .thanh trượt ();. Các tùy chọn của plugin bao gồm đặt vị trí ban đầu của thanh trượt và thêm / hiển thị hướng dẫn trên thanh trượt.
Gọi plugin:
$ ('. thanh trượt'). thanh trượt (); 
Cocoen
Cocoen cho phép liên lạc với việc sử dụng Sự kiện jQuery-Touch. Thật dễ dàng để áp dụng do cấu trúc HTML tương tự như Hai mươi hai mươi cắm vào. Trên ngăn xếp tập lệnh, bên cạnh jQuery, bạn cần bao gồm thư viện jQuery Touch Event, bên cạnh plugin này.
$ (tài liệu). yet (function () $ ('. cocoen'). cocoen (););
Hãy thử một bản demo dưới đây:
Hình ảnh so sánh thanh trượt
CodyHouse đã tạo một bản demo của một thanh trượt so sánh hình ảnh với CSS3, jQuery và một số tập lệnh để xử lý sự kiện kéo và để thêm hỗ trợ di động. Bạn có thể làm theo hướng dẫn đầy đủ và hướng dẫn sử dụng plugin này tại đây và xem bản demo tại đây.
Hãy thử một bản demo dưới đây:
Dưới đây là 3:
Cato - Các plugin khác cần jQuery làm phụ thuộc nhưng Cato không yêu cầu phụ thuộc vào công việc, làm cho nó trở thành một thư viện nhẹ hơn cho các thanh trượt so sánh hình ảnh. Việc sử dụng rất dễ dàng, chỉ cần bao gồm thư viện CSS và CSS của Cato và tuân theo cấu trúc HTML của nó.
Có các tùy chọn có sẵn để áp dụng trên thanh trượt của bạn, bao gồm thêm tooltip, thay đổi hướng thanh trượt, thậm chí thêm hiệu ứng bộ lọc như nâu đỏ và thang độ xám. Tuy nhiên, bạn cần lưu ý rằng Cato hiện chỉ hỗ trợ cho WebKit.
Trước Sau - Đây là trọng lượng nhẹ, đáp ứng đầy đủ và hoạt động trên mọi bố cục và kích thước. Bạn có thể xem các bản demo trực tiếp trên Codepen.
Thanh trượt so sánh video HTML5 - Khi các nhà phát triển khác cố gắng tạo thanh trượt so sánh cho hình ảnh, thì Dudley Storey áp dụng thanh trượt cho video. Để thực hiện công việc, anh ta sử dụng jQuery và chỉ một vài dòng mã. Xem bản demo trên Codepen để xem hành động.
