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()