1. 什么是 imgbig-pc
imgbig-pc 是一个轻量且易于使用的前端图片放大预览库。它能够让用户在鼠标悬停的同时对图片进行放大预览。 imgbig-pc 兼容性较好，支持在 PC 端与移动端的浏览器上使用。
2. 安装与导入
在使用 imgbig-pc 库前，需要先进行安装和导入。
2.1 安装
通过 npm 进行安装：
npm install imgbig-pc --save
2.2 导入
在需要使用的页面中导入：
import imgbig from 'imgbig-pc';
3. 使用示例
3.1 HTML
首先，在 html 中添加需要被放大预览的图片，并为图片添加相应的 data-src 与 alt 属性：
<img src="path/to/image" alt="place holder" data-src="path/to/big/image"/>
3.2 CSS
为了使图片能够被正确放大预览，需要添加一些必要的 CSS 样式：
-- -------------------- ---- ------- -- ------------- -- -------------- - --------- --------- -------- ------------- - -- --- -- ------------------ - --------- --------- ----------- - --- ---- ------- -- -- ---- -------- ---- - -- ---- -- -------- - ---------- ----- -
3.3 JavaScript
最后，在 JavaScript 中实例化 imgbig 对象，并调用 init 方法：
const imgbigOption = {} // 这里可以传递一些配置参数
const imgbigInstance = new imgbig(imgbigOption)
imgbigInstance.init()4. 参数说明
在实例化 imgbig 对象时，可以传递一些配置参数：
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| container | 图片的容器选择器，缺省时使用 body |
string | - | body |
| imgSelector | 被放大预览的图片选择器 | string | - | img |
| hoverDelay | 鼠标悬停延时时间，单位为毫秒 | number | - | 200 |
| scaleRatio | 放大比例 | number | - | 2 |
| offsetX | 放大图片相对于鼠标悬停点的 X 坐标偏移量 | number | - | 30 |
| offsetY | 放大图片相对于鼠标悬停点的 Y 坐标偏移量 | number | - | 30 |
| showTitle | 是否显示图片标题（即 alt 属性的值） |
boolean | true / false | true |
| titleClass | 标题样式类名 | string | - | big-img-title |
| imgClass | 放大图片样式类名 | string | - | big-img |
| containerCls | 图片容器样式类名 | string | - | img-container |
| bigCls | 放大图片容器样式类名 | string | - | big-img-container |
| zIndex | 预览容器的层级 | number | - | 999 |
| onshow | 预览容器显示时的回调函数 | function | - | function () {} |
| onhide | 预览容器隐藏时的回调函数 | function | - | function () {} |
5. 总结
imgbig-pc 是一款强大的前端图片放大预览库，支持在 PC 端与移动端浏览器上使用。通过本文的学习，您可以了解到如何配置和使用 imgbig-pc 库，帮助您在实际项目中更为便捷地实现图片放大预览效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055dba81e8991b448db785