5+最佳前后(图像比较)滑块jQuery和Javascript插件

本文概述

• 5. Cocoen
• 4. imgSlider
• 3. Juxtapose
• 2. Before-after.js
• 1. Twenty Twenty
• Beerslider

一切都是通过眼睛进行的, 无论主题(特别是谈论图像)是什么(最好, 漂亮)给人以最好的印象, 总会是用户的选择。允许用户查看2张图像之间的比较并由他自己进行控制的能力对用户而言是一种令人着迷的体验, 并且对你有利。值得注意的是, 我们不仅在谈论时间表(前后), 还为了在你的产品和其他产品之间进行比较(无论它们是否相似)。

就像在《 Tops》中经常提到的那样, 不要制造已经存在的轮子, 这会浪费金钱, 时间和精神健康(是的, 如果你是从地面开始的, 可能很难实现)。在此顶部中, 我们收集了Java和jQuery图像插件之间最不重要的7个比较, 因此你不会在寻找插件上浪费太多时间, 并且可以立即开始处理你的项目。好好享受 ！

5. Cocoen

设为首页Github

Cocoen是带有requestAnimationFrame的触摸式jQuery前/后jQuery插件。该插件基于Before-after.js

4. imgSlider

演示| Github

一个简单的jquery插件, 用于创建图像比较滑块。

3. Juxtapose

设为首页Github

Juxtapose是一个JavaScript库, 用于制作”前/后”图像滑块。 JuxtaposeJS帮助讲故事的人比较两种相似的媒体, 包括照片和GIF。非常适合突出显示过去/现在的故事, 这些故事可以解释随着时间的推移缓慢变化(城市天际线的增长, 森林的再生等)或显示单个戏剧性事件(自然灾害, 抗议, 战争, 等等。)。它是免费的, 易于使用的, 并且可以在所有设备上使用。你只需要入门即可链接到你要比较的图像。

你可以在水平甚至垂直模式下使用它。

2. Before-after.js

演示| Github

Before-after.js是简单易用的图像比较滑块。尽管”前后滑动器”的想法并不是什么新鲜事物, 尽管甚至有纯粹的CSS实现, 但也都不足为奇。 Before-after.js非常简单, 可能会满足你的所有需求。

1. Twenty Twenty

设为首页Github

开发人员通常倾向于将两个图像彼此相邻放置, 以希望用户可以清楚, 准确地看到更改的内容。但是, 有一种更好的方法可以突出显示两个图像之间的差异, 这种方法可以使所有内容聚焦。

这就是《二十二十岁》的意义, 这个jQuery插件是一个可视化的差异工具, 可以轻松地通过滑块项为用户识别2张图像之间的差异。

Beerslider

Github

Beerslider是一种普通JavaScript, 可前后访问。其基本目的是比较图像的两个版本, 例如, 在两个不同时刻拍摄的同一对象, 预编辑的照片及其处理版本, 草图和完成的插图等。它对于照片预设特别有用。 (Lightroom预设, Photoshop动作等)。 Beer Slider可通过键盘访问-你可以访问它并使用键盘显示/隐藏”之后”状态图像。

如果你知道另一个很棒的插件(前后比较), 请在评论框中与社区共享。