@femate/img-preview
v0.1.3
Published
一个简洁而又高效的Ts+Rollup的打包模板
Downloads
12
Readme
简介
特性
- ✅触摸手势:拖动/平移/物理效果滑动,双指指定位置放大/缩小
- ✅鼠标滚动缩放:丝滑般的缩放效果
- ✅多端适配:完美适配桌面端和移动端
- ✅简单、易可拓展的API,零成本上手
- ✅基于
typescript
、``、支持服务端渲染 - ✅支持自定义节点扩展,轻松实现全屏预览、旋转控制、图片介绍以及更多功能
- ✅超详细文档:适合在校大学生、实习生、中高级前端开发学习和使用
如果您觉得这个项目还不错, 可以在 Github 上面帮我点个star
, 支持一下作者 ☜(゚ヮ゚☜)
如何使用
方式1:通过 script 标签引入
CDN源
CDN源:jsdelivr
<script src="https://cdn.jsdelivr.net/npm/@femate/img-preview@latest/dist/index.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@femate/img-preview@latest/dist/index.css" />
CDN源:unpkg
<script src="https://unpkg.com/@femate/img-preview@latest/dist/index.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@femate/img-preview@latest/dist/index.css" />
HTML调用
<div id="app">
<img src="https://picsum.photos/800/800" alt="" />
<img src="https://picsum.photos/800/800" alt="" />
<img src="https://picsum.photos/800/800" alt="" />
<img src="https://picsum.photos/800/800" alt="" />
</div>
<script type="text/javascript">
window.onload = () => {
const ImgPre = new ImgPreview('#app', {
imageZoom: {
step: 1
},
style: {
maskOpacity: 0.8
},
onHide() {
//...
}
})
}
</script>
方式2:通过 import 引入
安装依赖
npm i @femate/img-preview
# or
pnpm add @femate/img-preview
# or
yarn add @femate/img-preview
使用
<div id="app">
<img src="https://picsum.photos/800/800" alt="" />
<img src="https://picsum.photos/800/800" alt="" />
<img src="https://picsum.photos/800/800" alt="" />
<img src="https://picsum.photos/800/800" alt="" />
</div>
import ImgPreview from '@femate/grid-picture'
const ImgPre = new ImgPreview('#app', {
imageZoom: {
step: 1
},
style: {
maskOpacity: 0.8
},
onHide() {
//...
}
})
事件
更新列表
动态更新图片列表场景
// 图片渲染到页面后调用
ImgPre.update()
幻灯片模式
简单实现幻灯片模式
let timer = null
const ImgPre = new ImgPreview('#app',{
clearInterval(timer)
})
function play() {
timer && clearInterval(timer)
let index = 0
ImgPre.show(index)
timer = setInterval(() => {
if (index < a.getTotalIndex()) {
index++
} else {
index = 0
}
ImgPre.show(index)
}, 2000)
}
上下翻页
ImgPre.next()
ImgPre.prev()
About Me
公众号:盲僧公众号,关注后回复「粉丝群」