先看效果
准备素材
两张对比效果图，比如一张彩色图片，一张灰色图片
友情提示：这个思路可实现你想要的那种变装效果哟^_^
实现原理
覆盖图的宽度通过 style.width 动态调整，范围从 0% 到 100%，显示或隐藏部分图片。 滑块的位置始终与覆盖图的宽度同步，通过 style.left 动态调整。
上完整代码（复制即可运行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动对比图片效果</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.banner {
height: 1200px;
background-color: #333;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
.container {
position: relative;
width: 100%;
}
.image-container {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
user-select: none; /* 禁止选中图片 */
}
.image-container img {
width: 100%;
height: auto;
display: block;
user-select: none; /* 禁止选中图片 */
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 0; /* 初始宽度为0 */
height: 100%;
overflow: hidden;
max-width: 100%;
}
.overlay img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
}
.slider {
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
background-color: #fff;
transform: translateX(-50%);
cursor: ew-resize; /* 添加鼠标样式 */
}
.slider::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.news {
height: 1200px;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
</style>
</head>
<body>
<div class="banner">Banner 区域</div>
<div class="container">
<div class="image-container">
<img src="./1.jpg?text=Before" alt="Before Image">
<div class="overlay">
<img src="./2.jpg?text=After" alt="After Image">
</div>
<div class="slider"></div>
</div>
</div>
<div class="news">新闻区域</div>
<script>
const overlay = document.querySelector('.overlay');
const slider = document.querySelector('.slider');
const imageContainer = document.querySelector('.image-container');
let isDragging = false;
// 监听页面滚动事件
window.addEventListener('scroll', () => {
if (!isDragging) {
updateOverlay();
}
});
// 监听滑块拖动事件
slider.addEventListener('mousedown', (e) => {
isDragging = true;
e.preventDefault(); // 防止默认行为（如选中图片）
});
window.addEventListener('mousemove', (e) => {
if (isDragging) {
const containerRect = imageContainer.getBoundingClientRect();
const mouseX = e.clientX - containerRect.left;
const overlayWidth = (mouseX / containerRect.width) * 100;
updateOverlay(overlayWidth);
}
});
window.addEventListener('mouseup', () => {
isDragging = false;
});
function updateOverlay(overlayWidth = null) {
const containerRect = imageContainer.getBoundingClientRect();
const viewportHeight = window.innerHeight;
if (overlayWidth === null) {
// 计算滚动进度（0 到 1 之间）
const scrollProgress = (viewportHeight - containerRect.top) / (containerRect.height + viewportHeight);
overlayWidth = Math.max(0, Math.min(1, scrollProgress)) * 100;
}
// 更新覆盖图和滑块的位置
overlay.style.width = `${overlayWidth}%`;
slider.style.left = `${overlayWidth}%`;
}
</script>
</body>
</html>
