npm package: @femate/img-preview
Description: 一个简洁而又高效的Ts+Rollup的打包模板
Author: BlindMonk
Latest version: 0.1.3

<p align="center" style="margin:30px 0;">
  <a href="#">
    <img width="150" height="auto" src="./src/assets/logo.png"/>
  </a>
  <h1 align="center">一款轻量级，兼容多端的 TypeScript 图片预览插件</h1>  
</p>

<p align="center">  
    <img src="https://img.shields.io/badge/-Rollup-34495e?logo=rollup" />
    <img src="https://img.shields.io/badge/-TypeScript-blue?logo=typescript&logoColor=white" />
    <img src="https://img.shields.io/badge/-ESLint-4b32c3?logo=eslint&logoColor=white" />
    <img src="https://img.shields.io/badge/-pnpm-F69220?logo=pnpm&logoColor=white" />
    <img src="https://img.shields.io/badge/-Prettier-ef9421?logo=Prettier&logoColor=white" alt="Prettier">
    <img src="https://img.shields.io/badge/-less-1D365D?logo=less&logoColor=white" alt="Less">  
    <img src="https://img.shields.io/badge/license-Apache2.0-blue.svg" alt="Apache-2.0">   
    
<p>   
<p align="center"> 
  <img width="460px" src="./src/assets/demo.gif" />
<p> 



# 简介

[使用文档介绍]()  |  [博文介绍]()  | [在线预览](https://www.maleweb.cn/student/projects/imgpreview/)


# 特性

- ✅触摸手势：拖动/平移/物理效果滑动，双指指定位置放大/缩小
- ✅鼠标滚动缩放：丝滑般的缩放效果
- ✅多端适配：完美适配桌面端和移动端
- ✅简单、易可拓展的API，零成本上手
- ✅基于`typescript`、``、支持服务端渲染
- ✅支持自定义节点扩展，轻松实现全屏预览、旋转控制、图片介绍以及更多功能
- ✅超详细文档：适合在校大学生、实习生、中高级前端开发学习和使用

如果您觉得这个项目还不错, 可以在 [Github](https://github.com/tobe-fe-dalao/femate) 上面帮我点个`star`, 支持一下作者 ☜(ﾟヮﾟ☜)
# 如何使用

## 方式1：通过 script 标签引入  
### CDN源
CDN源：jsdelivr
```html

<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
```html
<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调用

```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 引入  

### 安装依赖
```shell
npm i @femate/img-preview
# or
pnpm add @femate/img-preview
# or
yarn add  @femate/img-preview 
```
### 使用

```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>
```

```javascript
  import ImgPreview from '@femate/grid-picture'
  const ImgPre = new ImgPreview('#app', {
            imageZoom: {
                step: 1
            },
            style: {
                maskOpacity: 0.8
            },
            onHide() {
                //...
            }
        })
```
# 事件
## 更新列表
动态更新图片列表场景
```
// 图片渲染到页面后调用
ImgPre.update()
```
## 幻灯片模式
简单实现幻灯片模式
```javascript
  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  

<img width="460px" src="https://cdn.jsdelivr.net/gh/MaleWeb/picture/images/techblog/book-slogan.gif" />

 <img src="https://uufefile.uupt.com/eic/male/github/wechat.jpg" width="220" />  

 公众号：盲僧公众号，关注后回复「粉丝群」

# RoadMap
[Milestones](https://github.com/tobe-fe-dalao/femate/projects)  

# License
 [Apache-2.0](./LICENSE) © [MaleWeb](https://github.com/MaleWeb)