纯JS 全屏滚动 / 整屏翻页

###在线演示
http://ftp592347.host584.zhujiwu.me/js-fullpage/index.html
###知识点总结

1. 当需要制作转动鼠标滚轮放大页面字体这样的交互效果时，会用到 Mousewheel 事件。其实在大多数浏览器（IE6, IE7, IE8, Opera 10+, Safari 5+）中，都提供了 “mousewheel” 事件。但杯具的是 Firefox 3.5+ 却不支持此事件，不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件：”DOMMouseScroll”
2. mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动；
3. DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
   这个适用于pc，移动端代码见https://blog.csdn.net/tangdou5682/article/details/93754333，利用touch事件与scrollTo

###html代码

<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> </div> 

###css

<style type="text/css"> html,body{ 	height:100%; } body,ul,li,a,p,div{padding:0px; margin:0px; font-size:14px;} #wrap{ 	overflow: hidden; 	width:100%; } #main{ 	height:2944px; 	top:0; 	position: relative; } .page{ 	width:100%; 	margin:0; } #page1{ 	background:#E4E6CE; } #page2{ 	background:#6CE26C; } #page3{ 	background:#BF4938; } #page4{ 	background:#2932E1; } </style> 

###javascritpt

<script type="text/javascript">     var wrap = document.getElementById("wrap"); 	var main = document.getElementById("main"); 	var hei = document.body.clientHeight; 	wrap.style.height = hei + "px"; 	var obj = document.getElementsByTagName("div"); 	for(var i=0;i<obj.length;i++){ 		if(obj[i].className == 'page'){ 			 obj[i].style.height = hei + "px"; 		} 	} 	//如果不加时间控制，滚动会过度灵敏，一次翻好几屏 	var startTime = 0, //翻屏起始时间           endTime = 0,           now = 0;          //浏览器兼容           if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){            document.addEventListener("DOMMouseScroll",scrollFun,false);             }       else if (document.addEventListener) {           document.addEventListener("mousewheel",scrollFun,false);       }       else if (document.attachEvent) {           document.attachEvent("onmousewheel",scrollFun);        }       else{           document.onmousewheel = scrollFun;       }            //滚动事件处理函数     function scrollFun(event){     	startTime = new Date().getTime();       	var delta = event.detail || (-event.wheelDelta);       	//mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动     	//DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动     	if ((endTime - startTime) < -1000){     		if(delta>0 && parseInt(main.offsetTop) > -(hei*3)){     			//向下滚动     			now = now - hei;     			toPage(now);     	}  	    	if(delta<0 && parseInt(main.offsetTop) < 0){ 	    		//向上滚动 	    			now = now + hei; 	    			toPage(now); 	   		} 	   		 endTime = new Date().getTime();       	}     	   else{                   event.preventDefault();                 }         }      function toPage(now){                  $("#main").animate({top:(now+'px')},1000);     //jquery实现动画效果          //setTimeout("main.style.top = now + 'px'",1000);     javascript 实现动画效果     }    </script> 

请认真看注释和知识点，有什么问题或建议，欢迎留言^V