0.0.12 • Published 2 months ago
humming-preview v0.0.12
humming
极简轻量级图片预览插件
使用
浏览器
<script src="<path>/lib/umd/index.js" ></script>
<script>
new Humming()
</script>
require/import
import Humming from 'humming-preview'
// const humming = require('humming-preview')
new Humming()
API
new Humming([selector, mount])
参数
selector
[可选]
待预览的图片选择器
类型: string | HTMLElement | Array<HTMLElement>
默认: document.querySelectorAll("img")
mount
[可选]
挂载的点
类型: HTMLElement
默认:document.body
开箱即用
- 设置
data-humming
属性将会自动读取所有的图片
document.querySelectorAll("[data-humming] img")
- 设置
data-humming-img
属性将会自动读取所有的图片
document.querySelectorAll("[data-humming-img]")
注意
1. 若两种方式出现交叉将会自动去重
2. 开箱即用
为可选方案
3. 元素不一定是img
标签, 非img
标签需要要设置data-preview
或data-src
指向预览的图片地址
4. 优先级: data-preview
> data-src
> img.src
键盘快捷键
- 上一个:↑
- 下一个:↓
- 放大:+
- 缩小:-
- 鼠标滚轮:放大缩小
自定义预览
在非img
标签设置data-preview
或data-src
指向预览的图片地址
License
MIT license