两站图片重叠在一起,通过移动中间线段,来显示在最下面的图片的html,css,js
时间: 2024-03-26 19:36:10 浏览: 19
HTML代码:
```
<div class="image-container">
<div class="image-wrapper">
<img src="image1.jpg">
<img src="image2.jpg">
</div>
<div class="divider"></div>
<div class="bottom-image">
<img src="image3.jpg">
</div>
</div>
```
CSS代码:
```
.image-container {
position: relative;
width: 500px;
height: 300px;
}
.image-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.divider {
position: absolute;
top: 0;
left: 50%;
width: 2px;
height: 100%;
background-color: #fff;
transform: translateX(-50%);
cursor: ew-resize;
}
.bottom-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.bottom-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: screen;
}
```
JavaScript代码:
```
const imageContainer = document.querySelector('.image-container');
const divider = document.querySelector('.divider');
const images = document.querySelectorAll('.image-wrapper img');
const bottomImage = document.querySelector('.bottom-image img');
let isDragging = false;
divider.addEventListener('mousedown', () => {
isDragging = true;
});
imageContainer.addEventListener('mousemove', (e) => {
if (isDragging) {
const dividerPosition = e.pageX - imageContainer.offsetLeft;
const containerWidth = imageContainer.offsetWidth;
const dividerPercentage = dividerPosition / containerWidth;
images[0].style.clipPath = `inset(0 ${100 - dividerPercentage * 100}% 0 0)`;
images[1].style.clipPath = `inset(0 0 0 ${dividerPercentage * 100}%)`;
divider.style.left = `${dividerPosition}px`;
}
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
```
这段代码使用了事件监听来响应鼠标在中间线段上的操作,并通过计算中间线段的位置来动态改变两张图片的裁剪路径,从而实现两张图片的重叠。同时,使用CSS的mix-blend-mode属性,将最下面的图片应用于screen混合模式,使其能够与上面的图片重叠,并且只显示上面图片中没有显示的区域。
您可以根据自己的需要修改CSS样式和JavaScript代码,使其适应您的网页设计。