纯JS 全屏滚动 / 整屏翻页

本文主要是介绍纯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

这篇关于纯JS 全屏滚动 / 整屏翻页的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---