javascript實現頁面滾屏效果

時間 2019-12-06

原文原文鏈接

當咱們瀏覽網頁的時候，時常會碰到能夠滾動屏幕的炫酷網頁，今天筆者對這一技術進行簡單實現，效果不及讀者理想中那般炫酷，主要針對滾屏的技術原理和思想進行分享和分析。本示例在頁面右側有五個數字標籤，表明五個頁面，點擊數字能夠切換到對應的頁面，滾動鼠標滑輪能夠實現數字標籤的切換，頁面的切換。筆者未對頁面的平穩滾動進行實現，讀者可自行試驗研究。這是html代碼：javascript

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Document</title>
 6         <link rel="stylesheet" type="text/css" href="style.css" />
 7     </head>
 8     <body>
 9         <div class="big-box" id="bigBox">
10             <div class="item item1"><h1>屏幕1</h1></div>
11             <div class="item item2"><h1>屏幕2</h1></div>
12             <div class="item item3"><h1>屏幕3</h1></div>
13             <div class="item item4"><h1>屏幕4</h1></div>
14             <div class="item item5"><h1>屏幕5</h1></div>
15         </div>
16         <ul class="controls">
17             <li class="active">1</li>
18             <li>2</li>
19             <li>3</li>
20             <li>4</li>
21             <li>5</li>
22         </ul>
23         <script src="behavior.js"></script>
24     </body>
25 </html>

這裏是css結構代碼：css

 1 *{margin:0; padding:0;}
 2 html,body{
 3     width:100%;
 4     height:100%;
 5     overflow:hidden;
 6 }
 7 .big-box {
 8     width:100%;
 9     height:500%;
10     text-align:center;
11     position:absolute;
12 }
13 .big-box .item{
14     height:20%;
15 }
16 .big-box .item1 {
17     background-color:red;
18 }
19 .big-box .item2 {
20     background-color:blue;
21 }
22 .big-box .item3 {
23     background-color:purple;
24 }
25 .big-box .item4 {
26     background-color:gold;
27 }
28 .big-box .item5 {
29     background-color:pink;
30 }
31 .controls {
32     list-style:none;
33     position:absolute;
34     top:20%;
35     right:20px;
36 }
37 .controls li {
38     width:50px;
39     height:50px;
40     font:bold 22px/50px "宋體";
41     text-align:center;
42     background-color:#000;
43     color:#fff;
44     cursor:pointer;
45 }
46 .controls li+li {
47     margin-top:5px;
48 }
49 .controls li.active {
50     background-color:#fff;
51     color:red;
52 }

這裏是JavaScript代碼：html

 1 /*
 2     思路：
 3         第一步：當頁面加載完後，獲取所要操做的節對象
 4         第二步：爲document添加一個滾輪滾動事件
 5         第三步：滾輪滾動切換
 6             獲取當前瀏覽器可視區域的高度
 7             var viewHeight = document.body.clientHeight
 8             滾輪切換的目的：就是更改bigBox的top值
 9             top:最大0
10             top:最小  viewHeight*-4
11             從上到下或從下到上：最多走4次(5個頁面)   每一次走viewHeight
12             控制的關鍵點：索引  定一個索引   2
13             滾輪↓
14                 索引+1
15             滾輪↑
16                 索引-1
17             bigBox.style.top = -索引*viewHeihgt       
18 */
19 var bigBox = document.getElementById("bigBox");//獲取bigBox節點對象
20 var lis = document.querySelectorAll(".controls li");//獲取全部的li節點對象
21 var viewHeight = document.body.clientHeight;//獲取當前頁面高度
22 var flag = true;//設置開關
23 var index = 0;//設置索引
24 
25 //封裝事件,兼容瀏覽器
26 function on(obj,eventType,fn){
27     if(obj.addEventListener){
28         obj.addEventListener(eventType, fn);
29     }else{
30         obj.attachEvent("on" + eventType, fn);
31     }
32 }
33 //鼠標滾動事件處理函數
34 function handler(e){
35     var _e = window.event || e;
36     if(flag){
37         flag = false;
38         if(_e.wheelDelta==120 || _e.detail==-3){//若是鼠標滾輪向上滾動，detail爲火狐判斷條件
39             index--;
40             if(index<0){
41                 index = 0;
42             }
43         }else{//向下滾動
44             index++;
45             if(index>lis.length-1){//若是索引大於頁面數，就是滾到最後一張頁面時，再滾動鼠標頁面再也不滾動
46                 index = lis.length-1;
47             }
48         }
49         bigBox.style.top = -index*viewHeight + "px";//bigBox總體上移index個頁面
50         for(var i=0; i<lis.length; i++){
51             lis[i].className = "";//重置所有li的類
52         }
53         lis[index].className = "active";//設置當前li的類名
54         setTimeout(function(){//頁面滾動間隔一秒，防止滾動太快
55             flag = true;//從新開啓開關
56         },1000);
57     }
58 }
59 on(document,"mousewheel",handler);//滾輪滾動事件
60 on(document,"DOMMouseScroll",handler);//滾輪滾動事件，適配火狐瀏覽器
61 //數字標籤點擊處理
62 for(var i=0; i<lis.length; i++){
63     lis[i].tag = i;
64     lis[i].onclick = function(){
65         for(var j=0; j<lis.length; j++){
66             lis[j].className = "";
67         }
68         lis[this.tag].className = "active";
69         bigBox.style.top = -this.tag*viewHeight + "px";
70     }
71 }

筆者在這裏進行了html，css和javascript的分離，讀者可自行整合。代碼編寫的邏輯思路也在代碼中進行了簡單說明，方便讀者閱讀和理解。筆者在這裏只是對滾屏技術進行簡單的實現，純javascript技術，效果稍欠人意，讀者可自行學習，對這一技術進行完美實現。java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。