原生js實現全屏滾動

原生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");
　　　　};
　　}
}

 

結語:;第一次發博.第一次本身動手作特效.很粗糙,之後再改進.