纯js全屏切换效果

最新推荐文章于 2021-07-30 10:05:20 发布

初晨未凉

最新推荐文章于 2021-07-30 10:05:20 发布

阅读量165

点赞数

分类专栏：笔记

原文链接：https://blog.csdn.net/tangdou5682/article/details/52351404?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.pc_relevant_is_cache

版权

笔记专栏收录该内容

59 篇文章 1 订阅

订阅专栏

<!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>&gt;</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>

初晨未凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯js全屏切换效果

<!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{ heig
复制链接

扫一扫