手机端滚滚屏

来源：互联网发布：淘宝鲁班banner 编辑：程序博客网时间：2024/06/09 19:08

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<style>
*{
margin: 0;padding: 0;
}
body,html{
height: 100%;
overflow: hidden;
background-color: #666;
}
.page{
position: absolute;
top: 0;
left: 0;
width: 100%;height: 100%;
}
.no0{
background-color: #f00;
}
.no1{
background-color: #f55230;
}
.no2{
background-color: #263550;
}
.no3{
background-color: #ccc000;
}
.no4{
background-color: #aaaa00;
}
.no5{
background-color: #bbb;
}
</style>
</head>
<body>
<div class="page no0"><h1>0</h1></div>
<div class="page no1"><h1>1</h1></div>
<div class="page no2"><h1>2</h1></div>
<div class="page no3"><h1>3</h1></div>
<div class="page no4"><h1>4</h1></div>
<div class="page no5"><h1>5</h1></div>
<script>
var pages = document.querySelectorAll('.page');
//获取视口宽度
var windowHeight = document.documentElement.clientHeight;
//所有page就位
for (var i = 1; i < pages.length; i++) {
pages[i].style.webkitTransform='translateY('+windowHeight+'px)';
}
//监听
document.addEventListener('touchstart',touchstartHeander,false)
document.addEventListener('touchmove',touchmoveHeander,false)
document.addEventListener('touchend',touchendHeander,false)

// 开始滑动的手指位置
var startY;
//滑动距离
var distanceY;
//信号量
var idx = 0;
var prev = NaN;
var next = 1;

//函数节流
var lock =true;
//触摸开始
function touchstartHeander(){
//记录开始值
startY = event.touches[0].clientY;
//去掉所有过渡
pages[idx].style.transition='none';
//是数字才能执行
!isNaN(next)&&(pages[next].style.transition='none');
!isNaN(prev)&&(pages[prev].style.transition='none');

pages[idx].style.zIndex = '888';
!isNaN(next)&&(pages[next].style.zIndex = '999');
!isNaN(prev)&&(pages[prev].style.zIndex = '999');
}
//手指滑动
function touchmoveHeander(){
//手指移动距离
distanceY = event.touches[0].clientY- startY;
//到头了
// > 下滑 <上滑
if (idx==0 && distanceY>0) {
return;
}else if (idx==5 &&distanceY<0) {
return;
}
if (distanceY<0) {
//这个时间显示下面内容
pages[idx].style.webkitTransform='scale('+(1-Math.abs(distanceY)/windowHeight)+')';
!isNaN(next)&&(pages[next].style.webkitTransform = 'scale(1) translateY('+(windowHeight+distanceY)+'px)');
}else if(distanceY>0){
//显示上面内容
pages[idx].style.webkitTransform='scale('+(1-Math.abs(distanceY)/windowHeight)+')';
!isNaN(prev)&&(pages[prev].style.webkitTransform = 'scale(1) translateY('+( -windowHeight+distanceY)+'px)');
}
}
//触摸结束
function touchendHeander(){
if (idx ==0 && distanceY >0) {
return;
}else if (idx==5 &&distanceY <0) {
return;
}
// 根据distanceY判断是否成功
if (distanceY<-windowHeight/4) {
//向上滑动成功
console.log('向上滑动成功')
//先改变信号量
prev = idx;
idx =next;
next++;
if (next>5) {
next = NaN;
}
console.log(prev,idx,next);
//加上过度
!isNaN(idx)&&(pages[idx].style.transition='all 0.4s ease 0s');
!isNaN(prev)&&(pages[prev].style.transition='all 0.4s ease 0s');

//最终的位置
//上一张
pages[prev].style.webkitTransform = 'scale(0)' ;
pages[idx].style.webkitTransform = 'translateY(0px)' ;
// inAnmateArr[idx]();
// outAnmateArr[prev]();
}else if (distanceY>windowHeight/4) {
console.log('向下成功')
//改变信号量
next = idx;
idx = prev;
prev--;
if (prev<0) {
prev =NaN;
}
console.log(prev,idx,next);
//加上过度
!isNaN(idx)&&(pages[idx].style.transition='all 0.4s ease 0s');
!isNaN(next)&&(pages[next].style.transition='all 0.4s ease 0s');

//最终的位置
//上一张
pages[next].style.webkitTransform = 'scale(0)' ;
pages[idx].style.webkitTransform = 'translateY(0px)' ;
// inAnmateArr[idx]();
// outAnmateArr[next]();
}else{
pages[idx].style.transition='all 0.4s ease 0s';
!isNaN(prev)&&(pages[prev].style.transition='all 0.4s ease 0s');
!isNaN(next)&&(pages[next].style.transition='all 0.4s ease 0s');
pages[idx].style.webkitTransform = 'scale(1)';
!isNaN(next)&&(pages[next].style.webkitTransform = 'translateY('+windowHeight+'px)');
!isNaN(prev)&&(pages[prev].style.webkitTransform = 'translateY('+
-windowHeight+'px)') ;
}
}
//动画数组
// var inAnmateArr = [function(){},function(){}];
// var outAnmateArr =[function(){},function(){}];
</script>
</body>
</html>

阅读全文

1 0