在前端开发过程中，使用 npm 后，可以方便地在项目中引入各种第三方库和工具包。本文介绍一款名为 juxtaposejs 的 npm 包，它可以用于在网页中对比两张图片，并提供了多种对比方式，例如拖拽、滑块等。下面详细介绍如何使用该库。
安装
使用 npm 安装 juxtaposejs：
npm install juxtaposejs
也可以手动下载 juxtapose.js 或 juxtapose.min.js 文件并引入。
使用方法
1. 引入库文件
在 HTML 文件中引入 juxtapose.min.js：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
------- ------------------------------------------
-------
------
---- ---------------------
-------
-------在此，我们为 juxtapose 添加一个 div 元素，在该元素中将要展示对比后的图像。
2. 初始化对比图像
在 JavaScript 中，定义两张待对比的图片，并在 window.onload 中初始化对比图像：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
------- ------------------------------------------
-------
------
---- ---------------------
--------
------------- - ---------- -
--- ----------- - -
---- -----------------------
------ --------
--
--- ---------- - -
---- -----------------------
------ -------
--
--- ---------------------------------- ------------- ------------ ----
--
---------
-------
-------在 imageBefore 和 imageAfter 中定义了两张待对比的图片，这里均为 png 格式。使用 new juxtaposejs.JXSlider("#juxtapose", [imageBefore, imageAfter], {}); 初始化对比图像。该函数的参数依次为：
- 对比图像在 DOM 中的元素 id；
- 包含两张对比图像的数组；
- 配置项，这里为空。
3. 配置项
可以根据需要对 juxtaposejs 进行配置。
例如，在 var config = { "animate": true } 中修改了配置选项，将 animate 参数设置为 true，表示在拖拽时进行动画渲染。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
------- ------------------------------------------
-------
------
---- ---------------------
--------
------------- - ---------- -
--- ----------- - -
---- -----------------------
------ --------
--
--- ---------- - -
---- -----------------------
------ -------
--
--- ------ - - ---------- ---- --
--- ---------------------------------- ------------- ------------ --------
--
---------
-------
-------4. 附加特性
在上述示例中，使用了 label 参数为对比图像添加了标签。juxtaposejs 还提供了其他附加特性，具体可参考官方文档。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
------- ------------------------------------------
-------
------
---- ---------------------
--------
------------- - ---------- -
--- ----------- - -
---- -----------------------
------ --------
--
--- ---------- - -
---- -----------------------
------ -------
--
--- ------ - - ---------- ---- --
--- ---------------------------------- ------------- ------------ --------
--
---------
-------
-------以上就是 juxtaposejs 的使用方法，希望本篇文章对广大前端开发者有所启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ef94c49986ca68d87c3