javascript實現頁面滾屏效果
阿新 • • 發佈：2019-01-28
當我們瀏覽網頁的時候，時常會碰到可以滾動螢幕的炫酷網頁，今天筆者對這一技術進行簡單實現，效果不及讀者理想中那般炫酷，主要針對滾屏的技術原理和思想進行分享和分析。本示例在頁面右側有五個數字標籤，代表五個頁面，點選數字可以切換到對應的頁面，滾動滑鼠滑輪可以實現數字標籤的切換，頁面的切換。筆者未對頁面的平穩滾動進行實現，讀者可自行試驗研究。請看程式碼：
這是html程式碼：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title> 這裡是css結構程式碼：
*{margin:0; padding:0;}
html,body{
width:100%;
height:100%;
overflow:hidden;
}
.big-box {
width:100%;
height:500%;
text-align:center;
position:absolute;
}
.big-box .item{
height:20%;
}
.big-box .item1 {
background-color:red;
}
.big-box .item2 {
background-color:blue;
}
.big-box .item3 {
background-color:purple;
}
.big-box .item4 {
background-color:gold;
}
.big-box .item5 {
background-color:pink;
}
.controls {
list-style:none;
position:absolute;
top:20%;
right:20px;
}
.controls li {
width:50px;
height:50px;
font:bold 22px/50px "宋體";
text-align:center;
background-color:#000;
color:#fff;
cursor:pointer;
}
.controls li+li {
margin-top:5px;
}
.controls li.active {
background-color:#fff;
color:red;
}這裡是javascript程式碼：
/*
思路：
第一步：當頁面載入完後，獲取所要操作的節物件
第二步：為document新增一個滾輪滾動事件
第三步：滾輪滾動切換
獲取當前瀏覽器可視區域的高度
var viewHeight = document.body.clientHeight
滾輪切換的目的：就是更改bigBox的top值
top:最大0
top:最小 viewHeight*-4
從上到下或從下到上：最多走4次(5個頁面) 每一次走viewHeight
控制的關鍵點：索引 定一個索引 2
滾輪↓
索引+1
滾輪↑
索引-1
bigBox.style.top = -索引*viewHeihgt
*/
var bigBox = document.getElementById("bigBox");//獲取bigBox節點物件
var lis = document.querySelectorAll(".controls li");//獲取所有的li節點物件
var viewHeight = document.body.clientHeight;//獲取當前頁面高度
var flag = true;//設定開關
var index = 0;//設定索引
//封裝事件,相容瀏覽器
function on(obj,eventType,fn){
if(obj.addEventListener){
obj.addEventListener(eventType, fn);
}else{
obj.attachEvent("on" + eventType, fn);
}
}
//滑鼠滾動事件處理函式
function handler(e){
var _e = window.event || e;
if(flag){
flag = false;
if(_e.wheelDelta==120 || _e.detail==-3){//如果滑鼠滾輪向上滾動，detail為火狐判斷條件
index--;
if(index<0){
index = 0;
}
}else{//向下滾動
index++;
if(index>lis.length-1){//如果索引大於頁面數，就是滾到最後一張頁面時，再滾動滑鼠頁面不再滾動
index = lis.length-1;
}
}
bigBox.style.top = -index*viewHeight + "px";//bigBox整體上移index個頁面
for(var i=0; i<lis.length; i++){
lis[i].className = "";//重置全部li的類
}
lis[index].className = "active";//設定當前li的類名
setTimeout(function(){//頁面滾動間隔一秒，防止滾動太快
flag = true;//重新開啟開關
},1000);
}
}
on(document,"mousewheel",handler);//滾輪滾動事件
on(document,"DOMMouseScroll",handler);//滾輪滾動事件，適配火狐瀏覽器
//數字標籤點選處理
for(var i=0; i<lis.length; i++){
lis[i].tag = i;
lis[i].onclick = function(){
for(var j=0; j<lis.length; j++){
lis[j].className = "";
}
lis[this.tag].className = "active";
bigBox.style.top = -this.tag*viewHeight + "px";
}
}筆者在這裡進行了html，css和javascript的分離，讀者可自行整合。程式碼編寫的邏輯思路也在程式碼中進行了簡單說明，方便讀者閱讀和理解。筆者在這裡只是對滾屏技術進行簡單的實現，純javascript技術，效果稍欠人意，讀者可自行學習，對這一技術進行完美實現。