net-tools/view-bigimg

Composer 库 view-bigimg

维护者

详细信息

github.com/net-tools/view-bigimg

源代码

安装: 6

依赖项: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 9

语言:JavaScript

1.0.0 2020-06-09 12:14 UTC

MIT 32aabdf02fcea48f10fcf2116ab012236f066c18

  • Pierre <dev.woop@nettools.ovh>
  • https://github.com/newming/view-bigimg

This package is auto-updated.

Last update: 2024-09-09 21:41:19 UTC

README

一个用于缩放和平移网页图片的纯库

演示

功能

  • 支持触摸设备
  • 平滑拖动和平移图片
  • 捏合放大/缩小

如何使用

A. 使用内联脚本

<link rel="stylesheet" href="view-bigimg.css">
<script src="view-bigimg.js"></script>
<script>
  var viewer = new ViewBigimg()

  var wrap = document.getElementById('wrap')
  wrap.onclick = function (e) {
    if (e.target.nodeName === 'IMG') {
      viewer.show(e.target.src.replace('.jpg', '-big.jpg'))
    }
  }
</script>

B. 使用 npm

npm i view-bigimg
import 'view-bigimg/lib/view-bigimg.css'
import ViewBigimg from 'view-bigimg'

var viewer = new ViewBigimg
viewer.show(imgsrc)

API

  • new ViewBigimg(options)
    • show(imgsrc)
    • destroy()

new ViewBigimg(options)

创建 ViewBigimg 的实例