Maxima Overlay 配置化案例

方向、大小、旋转角度、动画时长都可以配置。点击下方按钮查看不同效果。

默认：右上角旋入

origin: 'top-right'，还原 maximatherapy.com 效果

左上角 + 大角度

origin: 'top-left'，rotateFrom: -90

左下角 + 大尺寸

origin: 'bottom-left'，面板 70vw / 80vh

data 属性：右下角

HTML 写 data-overlay-origin="bottom-right"

常用配置代码

// 方向 + 角度 + 大小
new MaximaOverlay({
  trigger: '#openTopLeft',
  panel: '#panelTopLeft',
  origin: 'top-left',           // 飞入方向
  animation: {
    desktop: {
      rotateFrom: -90,          // 旋转角度
      durationRotate: 1.2,      // 旋转时长
      easeRotate: 'elastic.out(1, 0.6)'
    }
  }
});

// 大小通过面板 CSS 类控制
// class="lg:w-[70vw] lg:h-[80vh]" 等