# 开源图片拖拽对比工具picture drag to reveal

*Published:* 2025-01-01
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2025年1月1日，已超过 180天没有更新



picture\_drag\_to\_reveal是一个开源的[图片](https://www.xarjtc.com/tag/pic "查看图片此标签更多文章")拖拽对比工具，允许用户通过拖动滑块或点击位置来对比两张图片的差异，支持鼠标和触摸屏操作，具备平滑的过渡动画效果和响应式设计。

[![](https://www.xarjtc.com/wp-content/uploads/2025/01/e5a7d34bd830eb1.webp)](https://www.xarjtc.com/wp-content/uploads/2025/01/e5a7d34bd830eb1.webp)

**功能特色：**

鼠标和触摸屏操作：支持鼠标拖动和触摸屏滑动操作。

点击移动滑块：支持直接点击图片上的任意位置移动滑块。

平滑过渡动画：提供平滑的过渡动画效果。

响应式设计：适配不同屏幕尺寸，确保在不同设备上的良好体验。

简洁的拖动滑块设计：提供简洁直观的拖拽滑块。

防止文本选中：在拖动时防止文本被选中。

**使用方法：**

引入文件

将 styles.css、script.js 和 index.html 文件放在同一目录下

替换 Helicopter.jpg 和 HelicopterOverlay.jpg 为你想要对比的两张图片

在浏览器中打开 index.html 文件即可使用

GitHub地址：https://github.com/maxminmarconi/picture\_drag\_to\_reveal