弹性图片对比

拖动分隔线对比两张图。线条随手势弯曲，快甩时滑到边缘。

拖拽交互六框架TypeScript

演示

拖动分隔线对比图片，快速甩动可滑到边缘。也支持方向键、Home 和 End。

npm install react react-dom

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

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

npm install react react-dom

ImageCompare.tsx

正在加载代码…

App.tsx

import { ImageCompare } from "./ImageCompare";

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

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

正在加载提示词…

属性	类型	默认值
`options.labels` 显示 Before 和 After 标签。	`boolean`	`true`
`options.corner` 图片圆角，单位为像素，范围 0–28。	`number`	`20`
`options.beforeSrc` 可选的对比前图片。省略时显示彩色图片的灰度版本。	`string`
`options.afterSrc` 可选的对比后图片。默认插画已内嵌。	`string`
`options.height` 场景的建议高度，内容较多时布局会相应延展。	`number`	`420`
`options.reducedMotion` 覆盖系统的减少动态效果偏好，同时保留完整交互状态。	`boolean`