medium-zoom,一款 JavaScript 图片缩放库

用于缩放图像的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

修改时间 2024-11-23

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
随机推荐
Photoshop 使用插件支持 webp 格式的文件
JavaScript 和 CSS 检测横屏适配
Wordpress 主样式表(style.css)
WordPress 侧边栏小工具
Node.js 简介
CRSF 跨站脚本攻击已死,使用 Same-Site Cookies 来防范 CSRF
JavaScript 代码混淆加密工具 javascript-obfuscator
Node.js test 模块