<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
height: 400px;
display: flex;
flex-direction: column;
}
.top-container {
height: 400px;
width: 400px;
background-color: #8CC7B5;
overflow: hidden;
}
.bottom-container {
width: 400px;
height: 0;
background-color: pink;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<div class="top-container">
<video src="22.mp4" controls="controls" width="400px" height="400px" id="video1">
您的浏览器不支持 video 标签。
</video>
</div>
<div class="bottom-container">
<video src="11.mp4" controls="controls" width="400px" height="400px" id="video2">
您的浏览器不支持 video 标签。
</video>
</div>
</div>
</body>
<script>
var container = document.querySelector('.container');
var topContainer = document.querySelector('.top-container');
var bottomContainer = document.querySelector('.bottom-container');
// 获得视频DOM
var video1 = document.getElementById("video1")
var video2 = document.getElementById("video2")
container.addEventListener('wheel', function(event) {
// Delta Y是指滚轮滚动的距离,上滚是负数,下滚是正数
var deltaY = event.deltaY;
if (deltaY > 0 && topContainer.offsetHeight > 0) {
// 下滚并且顶部容器未完全隐藏
topContainer.style.height = '0';
bottomContainer.style.height = '400px';
video1.pause();
video2.play();
} else if (deltaY < 0 && bottomContainer.offsetHeight > 0) {
// 上滚并且底部容器未完全隐藏
topContainer.style.height = '400px';
bottomContainer.style.height = '0';
video2.pause();
video1.play();
}
// 阻止滚动条滚动
event.preventDefault();
});
</script>
</html>
js实现两个视频的上下切换
最新推荐文章于 2024-04-19 09:19:44 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)