用于缩放图像的JavaScript库，像Medium网的一样。

特征

响应式——可在移动和桌面上扩展
性能卓越，重量轻——优化至每秒60帧
高清支持——在缩放时加载图像的高清版本
灵活性——将缩放应用于选定的图像
鼠标、键盘和手势友好——点击任意位置、按键或滚动以关闭缩放
事件处理——当缩放进入新状态时触发事件
自定义——设置自己的边距、背景和滚动偏移
可插拔——将您自己的功能添加到缩放中
自定义模板——扩展默认外观以匹配应用程序的UI
框架无关——适用于React、Vue、Angular、Svelte、Solid等。

使用方法

npm install medium-zoom

或直接在 HTML中引入

<script src="path/to/medium-zoom.min.js"></script>

然后，为你想要添加缩放功能的图片添加 data-zoomable 属性：

<img src="path/to/your/image.jpg" alt="Your Image" data-zoomable>

这样图片就有了缩放功能。

API

mediumZoom(selector，options)

selector

选择器允许将图像附加到缩放。它可以是以下类型：CSS selectors，HTMLElement，NodeList，Array。

// CSS selector
mediumZoom('[data-zoomable]')

// HTMLElement
mediumZoom(document.querySelector('#cover'))

// NodeList
mediumZoom(document.querySelectorAll('[data-zoomable]'))

// Array
const images = [
  document.querySelector('#cover'),
  ...document.querySelectorAll('[data-zoomable]'),
]

mediumZoom(images)

Option

mediumZoom('[data-zoomable]', {
  margin: 24,
  background: '#BADA55',
  scrollOffset: 0,
  container: '#zoom-container',
  template: '#zoom-template',
})

参考：

https://github.com/francoischalifour/medium-zoom

https://medium-zoom.francoischalifour.com

修改时间 2025-05-08