img-previewer
轻巧且强大的 javascript 图片预览插件,开箱即用,无需多余的配置.适用于任何网页页面,无需改变页面 html 代码结构
提供了常用的功能:
- 鼠标滚轮缩放图片
- 图标拖动图片
- 流畅的过渡动画
- 上一张&下一张
demo
安装
npm
npm i img-previewer
或者 CDN https://cdn.jsdelivr.net/npm/[email protected]/dist/img-previewer.min.js
在 vue / react 中使用
//js
import ImgPreviewer from 'img-previewer'
//css
import 'img-previewer/dist/index.css'
const imgpreviewer = new ImgPreviewer(id,{options...})
options
| 说明 | 默认值 | |
|---|---|---|
| ratio | 图片铺满预览区域的比例 | 0.9(90%) |
| scrollbar | 是否自动隐藏滚动条 | false |
| zoom | 缩放图片的配置 | {min: 0.1,max: 5,step: 0.1} |
| onInited | 初始化完成后触发事件 | - |
options.zoom
| 说明 | 默认值 | |
|---|---|---|
| min | 最小缩放比例 | 0.1(10%) |
| max | 最大缩放比例 | 5(500%) |
| step | 滚轮每次滚动变化的比例 | 0.1 |
更新图片
一些动态更新图片列表使用
const a = new ImgPreviewer('body')
// 图片渲染到页面后调用
a.update()
531 Oct 24, 2022
327 Oct 27, 2022
3.2k Dec 30, 2022
3.2k Dec 27, 2022
11 Feb 9, 2022
558 Dec 28, 2022
1.2k Dec 24, 2022
1.4k Dec 30, 2022
3 Apr 8, 2022
4 Mar 8, 2022