成果
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
<title> 滑动切换示例 </title>
<style lang="css">
.main {
width: 100%;
height: 100vh;
overflow: hidden;
}
.page {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
font-size: 24px;
}
.page1 {background: red;}
.page2 {background: blue;}
.page3 {background: green;}
.page4 {background: black;}
.page5 {background: yellow;}
.active {
display: block;
z-index: 10;
}
.hide {display: none;}
</style>
</head>
<body>
<div class="main" id="main">
<div class="page page1 active">this is page1</div>
<div class="page page2 hide">this is page2</div>
<div class="page page3 hide">this is page3</div>
<div class="page page4 hide">this is page4</div>
<div class="page page5 hide">this is page5</div>
</div>
</body>
<script>
var clientH = document.body.clientHeight // 屏幕高度
var y, mY, activeDiv, nextDiv, preDiv
// 监听触摸开始
document.body.addEventListener('touchstart', function(event) {
activeDiv = event.target
nextDiv = activeDiv.nextElementSibling
preDiv = activeDiv.previousElementSibling
y = event.touches[0].pageY
activeDiv.classList.remove('active')
})
// 监听触摸完结
document.body.addEventListener('touchend', function(event) {console.log(mY)
if(mY > 0) { // 向下滑动
if(mY > 100) { // 翻页
preDiv.style.transform = 'translate(0, 0)'
preDiv.style.transition = '.3s ease'
}else { // 还原
activeDiv.classList.remove('hide')
activeDiv.classList.add('active')
preDiv.classList.remove('active')
// 回到原处
preDiv.style.transform = 'translate(0, -' + clientH + 'px)'
preDiv.style.transition = '.3s ease'
}
// 过渡完结后，革除掉 style，防止下次动画提早
preDiv.addEventListener('transitionend', function() {
activeDiv.style = ''preDiv.style =''
if(mY > 100)
activeDiv.classList.add('hide')
else
preDiv.classList.add('hide')
})
}else { // 向上滑动
if(mY < -100) { // 翻页
nextDiv.style.transform = 'translate(0, 0)'
nextDiv.style.transition = '.3s ease'
}else { // 还原
activeDiv.classList.remove('hide')
activeDiv.classList.add('active')
nextDiv.classList.remove('active')
// 回到原处
nextDiv.style.transform = 'translate(0,' + clientH + 'px)'
nextDiv.style.transition = '.3s ease'
}
// 过渡完结后，革除掉 style，防止下次动画提早
nextDiv.addEventListener('transitionend', function() {
activeDiv.style = ''nextDiv.style =''
if(mY < -100)
activeDiv.classList.add('hide')
else
nextDiv.classList.add('hide')
})
}
})
// 滑动过程
document.body.addEventListener('touchmove', function(event) {mY = event.touches[0].pageY - y
if(mY > 0) { // 向下滑, 上一个滑块显示，并从顶部追随手指平移下来
preDiv.classList.remove('hide')
preDiv.classList.add('active')
preDiv.style.transform = 'translate(0, -' + (clientH - mY) + 'px)'
// 以后滑块变形，更好辨别成果
activeDiv.style.transform = 'scaleX(' + ((clientH - mY) / clientH) + ')'
}else { // 向上滑，下一个滑块显示，并从底部追随手指平移上来
nextDiv.classList.remove('hide')
nextDiv.classList.add('active')
nextDiv.style.transform = 'translate(0,' + (clientH + mY) + 'px)'
// 以后滑块变形，更好辨别成果
activeDiv.style.transform = 'scaleX(' + ((clientH + mY) / clientH) + ')'
}
})
</script>
</html>原理
应用 js 配合 css3 平移和过渡成果，把滑块定位到全屏，而后监听滑动事件，使滑块在 touchmove 过程中有平移和缩放的成果