<!DOCTYPE html>
<html>
<head>
<meta charset="UTD-8" />
<title>滑动图片案例</title>
<style>
.content {
width: 100%;
height: 3000px;
}
.topBox {
width: 100%;
height: 800px;
background-color: #ccc;
}
.imgBox {
position: relative;
width: 100%;
}
.imgBox .wrapper {
position: relative;
display: flex;
flex-direction: row;
width: 100%;
}
.imgBox .wrapper .leftText {
flex: 1;
}
.imgBox .wrapper .rightImg {
position: relative;flex: 1;
}
.photo {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
opacity: 1;
transition: opacity 1s ease;
background-color: aqua;
}
.photo_1 {
opacity: 0;
z-index: 1;
}
.photo_2 {
opacity: 0;
z-index: 2;
}
.photo_3 {
opacity: 0;
z-index: 3;
}
.photo_4 {
opacity: 0;
z-index: 4;
}
.photo_5 {
opacity: 0;
z-index: 5;
}
.bottomBox {
width: 100%;
height: 200px;
background-color: #f3deac;
}
</style>
</head>
<body>
<div class="content">
<div class="topBox"></div>
<div class="imgBox">
<div class="wrapper">
<div class="leftText">
<p>测试</p>
</div>
<div class="rightImg">
<div class="photo" style="background-color: red;z-index: 5"></div>
<div class="photo" style="background-color: blue;z-index: 4">
</div><div class="photo" style="background-color: green;z-index: 3">
</div><div class="photo" style="background-color: yellow;z-index: 2">
</div><div class="photo" style="z-index: 1"></div>
</div>
</div>
</div>
<div class="bottomBox"></div>
</div>
<script>
var length = document.getElementsByClassName('photo').length;
var bottomTop = document.getElementsByClassName('bottomBox')[0].offsetTop;
var clientHeight = document.documentElement.clientHeight;
document.getElementsByClassName('imgBox')[0].style.height = clientHeight * length + 'px';
document.getElementsByClassName('wrapper')[0].style.height = clientHeight + 'px';
let i = 0;
window.onscroll = function () {
var screenTop = document.documentElement.scrollTop || document.body.scrollTop;
var minHeight = document.getElementsByClassName('imgBox')[0].offsetTop;
var boxHeight = document.getElementsByClassName('imgBox')[0].offsetHeight;
var stepHeight = Math.floor((boxHeight - clientHeight) / length);
if (screenTop >= minHeight && screenTop < minHeight + boxHeight - clientHeight) {
// console.log('开始固定');var top = document.getElementsByClassName('wrapper')[0].offsetTop;
document.getElementsByClassName('wrapper')[0].style.position = 'fixed';
document.getElementsByClassName('wrapper')[0].style.left = 0;
document.getElementsByClassName('wrapper')[0].style.top = document.documentElement.scrollTop || document.body.scrollTop + 'px';
document.getElementsByClassName('wrapper')[0].style.right = 0;
if (screenTop >= (minHeight + stepHeight * i + stepHeight) && i < length - 1) {
// 根据步长循环改变样式
for (let j = 0; j <= i; j++) {
var array = document.getElementsByClassName('photo')[j].classList;
// 添加样式
document.getElementsByClassName('photo')[j].classList.add('photo_' + (j + 1));}
i++;
} else if (screenTop < (minHeight + stepHeight * i) && screenTop >= (minHeight + stepHeight * i - stepHeight) && i >= 0) {
console.log('向上滑动的时候', i);// 4 3 2 1
document.getElementsByClassName('photo')[i - 1].classList.remove('photo_' + (i));
i--;
}
} else if(screenTop >= minHeight + boxHeight - clientHeight){
document.getElementsByClassName('wrapper')[0].style.position = 'absolute';
document.getElementsByClassName('wrapper')[0].style.left = 0;
document.getElementsByClassName('wrapper')[0].style.bottom = 0;
document.getElementsByClassName('wrapper')[0].style.right = 0;
document.getElementsByClassName('wrapper')[0].style.top = '';
} else if(screenTop<minHeight) {
document.getElementsByClassName('wrapper')[0].style.position = 'relative';
document.getElementsByClassName('wrapper')[0].style.left = 0;
document.getElementsByClassName('wrapper')[0].style.top = 0;
document.getElementsByClassName('wrapper')[0].style.right = 0;
}
}
</script>
</body>
</html>实现效果：滑动到图片包裹层的时候，图片层固定定位，继续下滑，图片切换，上滑的时候恢复
随时随地看视频
