drift.js 是一款用于网站内部图片缩放的 JavaScript 库，可让用户在鼠标悬停时放大图片并在整个网页上漂移。
在本文中，我们将学习如何使用这个有用的 npm 包，实现网站内图片的缩放和漂移功能。
安装
使用 npm 命令安装 drift.js：
npm install drift-zoom
在实际使用中，我们可以在 HTML 文件中链接 drift.js 和样式表：
-- -------------------- ---- -------
--------- -----
------
------
---
----- ---------------- --------------------------------------------------
-------
------
---
------- ---------------------------------------------------------
-------
-------基本用法
使用 drift.js，我们只需要在 HTML 中为目标图片添加 data-drift-zoom 属性即可。例如：
<img src="path/to/image.jpg" data-drift-zoom>
现在，当用户在鼠标悬停在该图片上时（或者触摸该图片），将缩放并漂移图片。
自定义选项
drift.js 可以通过传递选项对象进行自定义配置，例如：
-- -------------------- ---- ------- ----- ------- - - -------------- ------------------------------------------ -------------- ----- ----------- ------ ------------ ----- -- ----- --- - ------------------------------ --- ---------- ---------
在这里，我们指定了一个容器元素、防止图片跳出容器、不使用内联面板以及不启用触摸行为。
可以使用如下选项：
| 属性 | 类型 | 默认值 | 描述 |
|---|---|---|---|
zoomFactor |
number | 1.5 | 图片缩放比例 |
paneContainer |
HTMLElement | document.body | 面板容器元素，所有的面板都将包含在该容器内；值为 false 时直接添加到 body 中 |
handleTouch |
boolean | true | 是否在移动设备上启用触摸以开始缩放 |
inlinePane |
boolean | true | 是否使用内联面板（而不是外部面板） |
inlineOffsetX |
number | 0 | 内联面板 X 坐标偏移量 |
inlineOffsetY |
number | 0 | 内联面板 Y 坐标偏移量 |
zoomContainer |
HTMLElement | null | 需要缩放容器的选择器（例如 .my-container）；从该元素的 CSS 规则中获取缩放容器的线框框（获取方式见知识点）参数 |
拓展知识
获取缩放容器的边框框
缩放功能可以容纳多个容器，而每个容器都可以具有不同的特征，如范围大小和视口等。要让 drift.js 知道应该将缩放限制应用于哪个区域，我们需要指定该容器的位置和尺寸。
首先，我们需要指定包含该容器的 CSS 选择器：
const options = {
zoomContainer: '.my-container'
};接下来，我们需要获取对应容器的边框框架。唯一需要做的就是在渲染面板之间调用 getDimensions 函数：
-- -------------------- ---- ------- ----- ------- - - -------------- --------------- -- ----- --- - ------------------------------ ----- ----- - --- ---------- --------- ---------------------------------- -- -- - ---------------------- ---
一旦获取了边框框架，drift.js 将在移动或缩放图像时限制到该边框框。例如，如果您已经指定了 zoomFactor: 1.5，则最终放大到 150%，如果在 my-container 容器之外，那么 getDimensions 函数将计算出正确的放大比例。
示例代码
以下是一个完整的 drift.js 示例，它使用一些预定义选项并指定缩放容器：
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- --------------------------------------------------
-------
------
---- ---------------------
---- ----------------------- ----------------
------
------- ---------------------------------------------------------
--------
----- ------- - -
----------- ----
-------------- ----------------------------------------
-------------- -----
----------- ------
------------ ------
-------------- ----
-------------- ---
-------------- ---------------
--
----- --- - ------------------------------
--- ---------- ---------
---------
-------
-------祝您使用 drift.js 编写的网页更加生动！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc081e8991b448dd0ed