原生js实现全屏滚动

Posted 2020-09-05

原生js实现全屏滚动(firefox兼容性问题还没解决)

最近发现刷前端在线简历,发现许多人都使用了全屏滚动特效

所以今天特意来实现一下

css样式:
* {
　　margin: 0;
　　padding: 0;
}
h1 {
　　width: 200px;
　　height: 200px;
　　margin: 0 auto;
}
div{
　　overflow: hidden;
　　position: absolute;
}
.show {
　　display: block;
}

/*第一页*/
#one {
　　background: red;
　　z-index: 4;
}
/*第二页*/
#two {
　　background: blue;
　　z-index: 3;
}

/*第三页*/
#three {
　　background: pink;
　　z-index: 2;
}

/*第四页*/
#four {
　　background: black;
　　z-index: 1;
}

html布局:
<!-- 第一页-->
　　<div id="one"class="pops hiddens show">
　　　　<h1>杨晓煊</h1>
　　</div>
<!-- 第二页-->
　　<div id="two" class="pops hiddens">
　　　　<h1>杨晓煊</h1>
　　</div>
<!-- 第三页-->
　　<div id="three" class="pops hiddens">
　　　　<h1>杨晓煊</h1>
　　</div>
<!-- 第四页-->
　　<div id="four" class="pops hiddens">
　　　　<h1>杨晓煊</h1>
　　</div>

 

js代码:

<script>

 

//获取屏幕有效的宽和高.
windowHeight=document.docementElement.clientHeight;
windowWidth=document.documentElement.clientWidth;

//得到div元素的集合

divs=document.getElementsByTagName("div");

/*js实现方法:

(1):先循环div元素集合.然后为div元素绑定事件;

(2):然后为每个div设置一个line属性,从0~div元素的个数.根据line属性的值判断当前显示的div的索引;

(3):然后滑轮滚动时再判断滚动向上还是向下转动.

(4):然后根据滑动方向显示出当前div的上一个或者下一个,同时将当前对象隐藏起来(通过添加类名来实现隐藏!!)

(5):同时设置上限和下限,到达顶部则上滑时直接return;到达底部下滑则直接return.

*/

for(var i=0;i<pops.length;i++){
　　divs[i].style.width=windowWidth+"px";
　　divs[i].style.height=windowHeight+"px";
　　divs[i].setAttribute("line",i);
　　divs[i].onmousewheel=function(){
　　var line=parseInt(this.getAttribute("line"));

　　if(event.wheelDelta<0){
　　　　if(line==3){return;}
　　　　this.classList.remove("show");
　　　　divs[line+1].classList.add("show");
　　}else{
　　　　if(line==0){return;}
　　　　this.classList.remove("show");
　　　　divs[line-1].classList.add("show");
　　　　};
　　}
}

 

结语:;第一次发博.第一次自己动手做特效.很粗糙,以后再改进.