HTML怎么做图片对比滑块_html图片前后对比滑块效果【详解】-html教程-PHP中文网

最简可控图片对比滑块应基于原生，用valueAsNumber实时计算遮罩宽度并应用clip-path或overflow裁剪，确保两图绝对定位重叠、等尺寸，移动端需设touch-action: none并禁用默认滚动。

html怎么做图片对比滑块_html图片前后对比滑块效果【详解】

用 `input[type="range"]` 实现最简可控滑块

原生是图片对比滑块最轻量、最可控的起点。它自带拖拽、键盘控制（左右箭头微调）、无障碍支持，且无需第三方库。关键不是“怎么加效果”，而是“怎么把滑块位置精准映射到两张图的裁剪边界”。

常见错误是直接用滑块值控制 left 或 transform，结果在不同屏幕宽度下错位。正确做法是用滑块的百分比值（event.target.valueAsNumber）动态计算容器内遮罩层的宽度：

<div class="compare-container">
  @@##@@
  @@##@@
  <div class="mask" id="mask"></div>
  <input type="range" min="0" max="100" value="50" id="slider">
</div>

JS 中监听滑动并更新 mask 宽度：

const slider = document.getElementById('slider');
const mask = document.getElementById('mask');
slider.addEventListener('input', () => {
  const percent = slider.valueAsNumber;
  mask.style.width = `${percent}%`;
});

为什么必须用绝对定位 + 同尺寸图层叠加

两张图必须严格等宽等高、完全重叠，否则滑块移动时会出现错位、白边或内容跳动。这不是样式“美观”问题，而是布局逻辑前提。

两张都设为 position: absolute; top: 0; left: 0;，父容器 position: relative;
确保它们加载后尺寸一致：用 object-fit: cover; 或提前压缩为相同分辨率，避免浏览器缩放导致像素错位
.mask 也需 position: absolute; top: 0; left: 0; height: 100%; background: transparent; —— 它不遮挡图层，只作为视觉分界参考（可加细线边框）

若图源来自 CMS 或用户上传，务必在 JS 中监听 load 事件后统一设置宽高，不能只靠 CSS width: 100%。

`clip-path` 比 `overflow` 更可靠但有兼容性代价

用 overflow: hidden 裁剪后图层虽简单，但在 Safari 或旧 Edge 中容易因渲染管线差异出现 1px 锯齿或拖动卡顿。更稳的方式是给后图层加 clip-path：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

.img-after {
  clip-path: inset(0 0 0 calc(100% - var(--mask-width, 50%)));
}

然后 JS 动态更新 CSS 变量：

slider.addEventListener('input', () => {
  const percent = slider.valueAsNumber;
  document.documentElement.style.setProperty('--mask-width', `${percent}%`);
});

注意：clip-path 在 IE 完全不支持，iOS Safari 15.4+ 才稳定支持 inset() 动画。如果必须兼容老系统，退回 overflow + transform: translateX() 组合，但要加 will-change: transform; 防闪烁。