原生javascript实现简单的全屏效果
要实现全屏滚动的效果，无非是让每页的内容页高度达到浏览器窗口的高度。通过判断鼠标滚动事件来设置定时器运动方式。
基本的html结构：
CSS:
*{
margin:0;
padding:0;
}
#wrap{
overflow: hidden;
width:100%;
}
#main{
height:100%;
top:0;
position: relative;
}
.page{
width:100%;
margin:0;
}
#page1{
background:#555;
}
#page2{
background:#6CE26C;
}
#page3{
background:#fcfc46;
}
#page4{
background:#ff0000;
}如上，需要设置每个page项的高度大小都为窗口高度大小，并且，最外层容器，也就是wrap的高度也是一样，如果漏了设置wrap高度，每页的高度也是正常的，但是最后滚动的时候实际上会漏出其他页的内容。
var wrap = document.getElementById("wrap");
var main = document.getElementById("main");
var pages = main.getElementsByClassName("page");
var pageLen = pages.length;
var pageH = document.body.clientHeight||document.documentElement.clientHeight;
wrap.style.height = pageH + "px";
console.log("wrap:"+wrap.style.height);
for(var i=0;
ijavascript在实现滚轮的时候存在兼容性的问题，首先，对于鼠标滚动事件，firefox有自己的解决方法，方法叫DOMMouseScroll，鼠标滚动的时候触发。其有关鼠标滚轮的信息则保存在detail属性中，当向前滚动滚轮时，其值为-3的倍数，当向后滚动滚轮时，其值为3的倍数。
其他浏览器（包括烦人的IE6、7）有一个名叫“mousewheel”的事件，该事件可以在任何元素上触发，而且可以冒泡(前面那个DOMMouseScroll也可以)，该事件有一个属性叫“wheelDelta”，向上滚动鼠标滚轮时，wheelDelta是120的倍数；向下滚动鼠标滚轮时，wheelDelta是-120的倍数。
为了兼容，可以通过下面的方式：
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;
} 滚动事件处理函数无非就是判断wheelDelta和delta的值还有外部容器main.offsetTop的值，然后触发动画效果，这里要注意，为了防止多次触发，比如用户在短时间内疯狂滚滚轮，然而不想要疯狂触发，那么需要在触发动画前后通过定时器设定阀值。
具体的实现参考下面代码，已经有注释了：
var wrap = document.getElementById("wrap");
var main = document.getElementById("main");
var pages = main.getElementsByClassName("page");
var pageLen = pages.length;
var pageH = document.body.clientHeight||document.documentElement.clientHeight;
wrap.style.height = pageH + "px";
//注意
console.log("wrap:"+wrap.style.height);
for(var i=0;
i0 && parseInt(main.offsetTop) > -(pageH*(pageLen-1))){
//向下滚动
now = now - pageH;
//向下翻过一页
toPage(now,"down");
console.log("wrap:"+wrap.style.height);
//console.log("down.now:"+now);
//console.log("main:"+main.offsetTop);
}
if(delta<0 && parseInt(main.offsetTop) < 0){
//向上滚动
now = now + pageH;
toPage(now,"up");
}
endTime = new Date().getTime();
//重置时间
}else{
event.preventDefault();
}
}
var sliderTime = null;
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{//当now的高度达到整个页面高度，结束运动
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实现简单的全屏效果】上面的toPage方法是带缓冲的效果，粗暴的方法不带缓冲：
function toPageNow(now){
// $("#main").animate({top:(now+'px')},1000);
//jquery实现动画效果
setTimeout("main.style.top = now + 'px'",1000);
//javascript 实现动画效果
}推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 事件代理
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 数组常用方法一
- NeuVector 会是下一个爆款云原生安全神器吗（）