在前端开发中，我们经常需要实现缩放的效果。而 lg-zoom 是一个可以帮助我们轻松实现图片缩放效果的 npm 包。本文将介绍如何使用该包以及如何进行自定义配置。
安装
你可以通过以下命令来安装 lg-zoom：
--- ------- ------- ------
基础使用
首先，在 HTML 中引入所需的库文件：
----- ---------------- ------------------------------------ ------- -----------------------------------------------
然后，在 JavaScript 中初始化 lg-zoom：
------ ------ ---- ---------- ----------------------------------------------------- - -------- --------- ---
最后，为需要缩放的图片添加 CSS 类名：
---- ------------------ -----------------------------
这样就可以实现基础的图片缩放功能了。
自定义配置
除了基础使用之外，我们还可以根据自己的需要进行自定义配置，例如更改缩放图标、修改动画时间等。下面是一些常用的自定义配置选项：
scale: 缩放比例
可以通过 scale 选项来设置缩放比例，默认值为 1.1：
----------------------------------------------------- -
-------- ---------
---------- -
-------- -
------- -
------ ----
--
--
--
---enableDrag: 开启拖动
可以通过 enableDrag 选项来开启或关闭缩放时的拖动功能，默认值为 true：
----------------------------------------------------- -
-------- ---------
---------- -
-------- -
------- -
----------- ------
--
--
--
---zoomIcon: 缩放图标
可以通过 zoomIcon 选项来更改缩放图标，默认值为 icon-zoom-in：
----------------------------------------------------- -
-------- ---------
---------- -
-------- -
------- -
--------- ----------
--
--
--
---示例代码
以下是一个完整的示例代码，展示了如何使用 lg-zoom 实现一组图片的缩放效果：
--------- -----
------
------
-------------- ------------
----- ---------------- -------------------------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------------------------
-------
------------- -
-------- -----
---------- -----
---------------- -------
------------ -------
------- ------
-
------------- --- -
------ ------
------- -----
------- -----
------- --------
-
--------
-------
------
---- -------------------- ------------------
---- ------------------ ---------------------------------------------
---- ------------------ ---------------------------------------------
---- ------------------ ---------------------------------------------
---- ------------------ ---------------------------------------------
---- ------------------ ---------------------------------------------
---- ------------------ ---------------------------------------------
------
--------
------ ------ ---- ----------
----------------------------------------------------- -
-------- ---------
---------- -
-------- -
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------