弹性图片手风琴

悬停时照片弹性展开，邻图随之调整，横栏总宽保持不变。

悬停交互六框架TypeScript

演示

悬停或用 Tab 聚焦可展开照片。触屏点按展开，再点同一张收起。

npm install react react-dom

将代码包中的四个文件放在同一目录。样式和字体已包含，由所选框架的构建工具编译入口文件。

上方安装命令会自动添加这些依赖。如果手动复制源码，请自行安装。

npm install react react-dom

ImageAccordion.tsx

正在加载代码…

App.tsx

import { ImageAccordion } from "./ImageAccordion";

export default function App() {
  return <ImageAccordion />;
}

共用原生核心处理交互，各框架独立挂载、更新和销毁实例。

正在加载提示词…

属性	类型	默认值
`options.open` 活动照片的展开幅度，范围 0–100。	`number`	`50`
`options.reach` 展开影响邻图的范围，取值 0–100。	`number`	`35`
`options.bounce` 弹簧的回弹强度，范围 0–100。	`number`	`10`
`options.gap` 图片间距，范围 0–20px。圆角随间距变化，最大 12px。	`number`	`8`
`options.images` 传入一至五张带无障碍名称的图片。演示内嵌五张照片。	`{ name: string; src: string }[]`
`options.height` 场景的建议高度，内容较多时布局会相应延展。	`number`	`420`
`options.reducedMotion` 覆盖系统的减少动态效果偏好，同时保留完整交互状态。	`boolean`