<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/home.css" />
<style>
html,body{
height: 100%;
margin: 0;
padding: 0;
}
#wrap{
overflow: hidden;
}
#main{
position: relative;
top: 0;
transition: 0.5s;
}
.page{
width: 100%;
}
#page1{
background-color: red;
}
#page2{
background-color: #f90;
}
#page3{
background-color: yellow;
}
#page4{
background-color: green;
}
.btnToggle{
position: fixed;
bottom: 40px;
left: 50%;
transform: rotate(90deg);
cursor: pointer;
}
.btnToggle span{
font-size: 34px;
color: #fff;
}
</style>
</head>
<body>
<div id="wrap">
<div id="main">
<div id="page1" class="page"></div>
<div id="page2" class="page"></div>
<div id="page3" class="page"></div>
<div id="page4" class="page"></div>
<div class="btnToggle"><span>></span></div>
</div>
</div>
<script type="text/javascript">
var wrap = document.getElementById('wrap');
var main = document.getElementById("main");
var btnToggle = document.getElementsByClassName('btnToggle')[0];
var startTime = 0;
var endTime = 0;
var now = 0;
//获取网站可视区域的高,并给最外层的div
var height = document.body.clientHeight;
wrap.style.height = height + "px";
//给里面的每个div都给可视区域的高
var page = document.getElementsByClassName('page');
for(var i = 0; i < page.length; i++){
page[i].style.height = height + "px";
}
window.onmousewheel = function(e){
startTime = new Date().getTime();
if(endTime - startTime < -600){
//鼠标向上移动
if (e.wheelDelta > 0 && parseInt(main.offsetTop) < 0) {
now = now + height;
setTimeout("main.style.top = now +'px'",20);
//鼠标向下移动
} else if(e.wheelDelta < 0 && parseInt(main.offsetTop) + (height * 3) > 0){
now = now - height;
setTimeout("main.style.top = now +'px'",20);
}
endTime = startTime;
}
}
btnToggle.onclick = function(){
if(parseInt(main.offsetTop) + (height * 3) > 0){
now = now - height;
setTimeout("main.style.top = now +'px'",20);
}else{
now = 0;
setTimeout("main.style.top = 0 +'px'",20);
}
}
</script>
</body>
</html>
纯js全屏切换效果
最新推荐文章于 2024-07-19 09:33:15 发布