纯JavaScript实现全屏滚动效果

最近想做一个全屏滚动效果，然后在网上查了一下，比较多的是用jquery.fullPage插件，我实在不想用插件，然后在网上查了一下能不能用原生的js实现，发现还真不少呢，有些感觉写的挺麻烦的，我看得逻辑还理不清（没办法，水平不高），然后看到一个比较简单易懂的，就模仿了，然后自己改了一下，他原来的代码滚动的时候过度效果用的是jquery，然而我不想用，就用原生js实现滚动过度效果了。

那就直接上代码吧，

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>原生js实现全屏滚动</title>
    <link rel="stylesheet" type="text/css" href="../css/test.css">
</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>
	</div>
	<script type="text/javascript">
	
	</script>	
    <script type="text/javascript" src="../js/test.js"></script>
</body>
	
</html>

css代码人如下：

html,body{
    height:100%;
}
body,ul,li,a,p,div{padding:0px; margin:0px; font-size:14px;}
#wrap{
    overflow: hidden;
    width: 100%;
    height: 100%;
}
#main{
    top: 0;
    position: relative;
    width: 100%;
    height: 100%;
}
.page{
    width:100%;
    margin:0;
}
#page1{
    background: blue;
}
#page2{
    background: yellow;
}
#page3{
    background: green;
}
#page4{
    background: red;
}

最重要的js代码如下：

var wrap = document.getElementById("wrap");
var main = document.getElementById("main");
var pages = main.getElementsByClassName("page");
var pageLen = pages.length;
var pageH = document.body.clientHeight;

for(var i=0;i<pages.length;i++){
	pages[i].style.height = pageH + "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;  
}  

/**
 * 滚动事件处理函数
 * @param event
 */
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) > -(pageH*(pageLen-1))){
			//向下滚动
			now = now - pageH;
			toPage(now,"down");
        } 
		if(delta<0 && parseInt(main.offsetTop) < 0){
			//向上滚动
			now = now + pageH;
			toPage(now,"up");
		}
		endTime = new Date().getTime();  
	}else{  
		event.preventDefault();    
	}    
}
var sliderTime = null;
/**
 * 原生js实现过度效果
 * @param now
 * @param direction
 */
function toPage(now,direction){    
	clearInterval(sliderTime);//执行当前动画同时清除之前的动画
	sliderTime = setInterval(function(){
		var speed = 0;
		if(direction == "down"){
			if(now<0 && now < main.offsetTop){
				speed = -10;
				main.style.top = main.offsetTop+speed + "px";
				if(main.style.top<=now){
					main.style.top = now + "px";
				}
			}else{
				main.style.top = now + "px";
				speed = 0;
				clearInterval(sliderTime);
			}
		}else{
			if(now<=0 && now >= main.offsetTop){
				speed = 10;
				main.style.top = main.offsetTop+speed + "px";
				if(main.style.top>=now){					
					main.style.top = now + "px";
				}
			}else{
				main.style.top = now + "px";
				speed = 0;
				clearInterval(sliderTime);
			}
		}		
	},10);
}

纯JavaScript实现全屏滚动效果

猜你喜欢