@femate/img-preview NPM

简介

使用文档介绍 | 博文介绍 | 在线预览

特性

✅触摸手势：拖动/平移/物理效果滑动，双指指定位置放大/缩小
✅鼠标滚动缩放：丝滑般的缩放效果
✅多端适配：完美适配桌面端和移动端
✅简单、易可拓展的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)
  }