js之整页翻屏效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>整页翻屏效果</title>
</head>
<style>
*{
margin:0;
padding:0;
list-style-type: none;
}
.container{
width: 100vw;
height: 100vh;
overflow: hidden;
}
.container li{
height: inherit;
width: inherit;
transform: translateY(-0vh);
transition: 1s ease;
opacity: 1;
}
/* .container li.active{
opacity: 1;
} */
</style>
<body>
<div class="container">
<li class="active" style="background:red;"></li>
<li style="background:gold;"></li>
<li style="background:skyblue;"></li>
<li style="background:greenyellow;"></li>
<li style="background:pink;"></li>
<!-- <ul class="content">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul> -->
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
<script>
let i=0;
let maxlen=document.querySelectorAll('.container li');
// 适配火狐
// window.addEventListener('DOMMouseScroll',function(e){
// console.log(e.deltail>0?'下':'上')
// i++;
// if(i>=maxlen.length) return;
// $('.container li').css('transform',`translateY(-${i*100}vh)`)
// })
// 适配谷歌
//节流
let endTime=new Date();
window.onmousewheel=function(e){
let isDown=e.wheelDelta<0
change(isDown)
}
function change(isDown){
if(new Date() - endTime < 500) return console.log('i an busy');
console.log(isDown?'下':'上')
if(isDown){
i++;
if(i>=maxlen.length) i=maxlen.length-1;
}else{
i--
if(i<0) return;
}
$('.container li').css('transform',`translateY(-${i*100}vh)`);
endTime=new Date();
}
</script>
</body>
</html>
