Mona.js

By on

Mona.js 是一款纯 JavaScript 图片缩放库，主要特点有：

  • 野蛮性能，腼腆大小
  • 一个 .js 文件，没有额外的依赖关系，没有臃肿的基础样式要求
  • 可缩放高清图像
  • 流畅的切换动画
  • 易于集成和定制
  • 支持 Safari backdrop-filter

开始使用

Mona.js 被封装在通用模块语法（Universal Module Syntax，UMD）中，这意味着需要引入 <script></script> 标记，import，或 require('mona.js')

用法

Mona(elements, {
  time: 300,
  padding: 40,
  offset: 40,
  keyboard: true,
  cubicBezier: 'cubic-bezier(.2, 0, .1, 1)',
  zIndex: 2147483647
});

设置

<img src="photo.jpg">
<script>
  window.addEventListener('load', function () {
    Mona('img');
  }, false);
</script>

自定义背景颜色

<img src="screenshot.png" data-background="rgba(0, 0, 0, .96)">

自定义填充大小

<img src="screenshot.png" data-padding="0">

禁用 Mona.js 效果

<img src="photo.jpg" class="no-mona">
<script>
  window.addEventListener('load', function () {
    Mona('img:not(.no-mona)');
  }, false);
</script>

下载

Github

浏览器支持

兼容所有的现代浏览器，甚至在 Internet Explorer 10 中也能「运行」。