javascript實現全屏頁面滾動效果

Posted on by

在我讀完javaScript DOM之後，對解釋型的javaScript腳本語言有瞭更加深刻的感悟和理解，並使我的javaScript代碼更加規范化。

接下來，我們轉入今天我要分享的技術性問題：全屏頁面實現滾動。

實現的代碼很簡單，但是發現其中存在的問題就要靠長久的經驗、讀書閱歷、以及程序員豐富的想象力。

先來看看，最後完成的兩個效果圖，以及console.log打印出來的內容：

1.點擊頁面2效果，以及打印的結果：

在點擊之後，pagelist[this.index].rollCount計時器中打印一串的值為Math.ceil(rollData.num)；5秒後自動執行另外一個計數器清除pagelist[this.index].rollCount計時器。

2.再次點擊頁面2，以及打印的結果：

在點擊之後，會先判斷pagelist[this.index].rollCount計時器是否存在，存在則清除；如果已經到達點擊對應的頁面完後會打印出不執行，並return 

具體請看下邊例子，具體各種情況已經做出詳細說明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏翻頁效果實現</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
 
        html, body {
            width: 100%;
            height: 100%;
            color: #fff;
        }
 
        ul {
            list-style: none
        }
 
        #nav {
            position: fixed;
            top: 50px;
            left: 50px;
        }
 
        #nav li {
            width: 80px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 2px solid #fff;
            cursor: pointer;
        }
 
        #nav li:nth-child(1) {
            background: #f60;
        }
 
        #nav li:nth-child(2) {
            background: #63c;
        }
 
        #nav li:nth-child(3) {
            background: #3c6;
        }
 
        #nav li:nth-child(4) {
            background: #f9c;
        }
 
        #page {
            width: 100%;
            height: 100%;
        }
 
        #page li {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<ul id="page">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<ul id="nav">
    <li>頁面1</li>
    <li>頁面2</li>
    <li>頁面3</li>
    <li>頁面4</li>
</ul>
<script>
    function rollingPage() {
        var pageul = document.getElementById("page");
        var pagelist = pageul.children;
 
        var navul = document.getElementById("nav");
        var navlist = navul.children;
 
        for (i = 0; i < navlist.length; i++) {
            //得到全部樣式getComputedStyle
            var bgcolor = getComputedStyle(navlist[i], "").backgroundColor;
//        alert(bgcolor);
            pagelist[i].style.background = bgcolor;
 
            //給當前的元素定義一個index對象,保存當前元素的下標
            navlist[i].index = i;
 
            //以對象聲明變量
            var rollData = {
                num: 0,
                target: 0
            };
            navlist[i].onclick = function () {
 
                //被點擊的按鈕相對應的頁面距離整個頁面頂部的距離
                rollData.target = pagelist[this.index].offsetTop;
 
                //判斷被點擊的是否是當前的，是的話就不繼續執行
                var h = window.innerHeight || document.documentElement.clientHeight 
                    || document.body.clientHeight;
                var x = this.index;
                //判斷當前點擊的按鈕對應的頁面是否存在元素屬性計時器
                if (pagelist[this.index].rollCount) {
                    console.log("存在");
                    clearInterval(pagelist[this.index].rollCount);
 
                    /*防止連續點擊造成直接return致使頁面沒加載完，因此添加判斷來遏制。
                     *這樣即使頁面沒完全到達，哪怕上邊清除後，
                       *也會繼續向下執行計數器pagelist[this.index].rollCount
                     * */
                    /*但是發現事情終究不會很完美，需要不斷地改進。
                     *在我和朋友聊天的一瞬間，再次點擊瞭當前頁面對應的按鈕，
                       *卻發現沒有執行下邊return.
                     *再看看計數器中打印的Math.ceil(rollData.num)的值為1。
                     *因此加上瞭Math.ceil(rollData.num) + 1 == h * x || 
                     *Math.ceil(rollData.num) - 1 == h * x
                     *
                     *之所以造成這樣的原因還有就是，
                       *在 window.scrollTo(0, Math.ceil(rollData.num) + 1)
                     *以及減一和不加堿的後，保存的值為Math.ceil(rollData.num)未加堿。
                     * */
                    if (Math.ceil(rollData.num) + 1 == h * x || 
                             Math.ceil(rollData.num) - 1 == h * x || 
                                   Math.ceil(rollData.num) == h * x) {
                        console.log("不執行");
                        //如果存在並且滾動條滾動到的數值與當前頁面的相等，
                          //則不向下執行計數器。
                        return;
                    }
                }
 
                //計時器進行頁面滾動
                pagelist[this.index].rollCount = setInterval(function () {
                    //Math.ceil()向大於方向進行舍入
                    rollData.num = rollData.num + 
                                     (rollData.target - rollData.num) / 10;
                    console.log(Math.ceil(rollData.num));
              //1.使滾動條到與h*x的位置， window.scrollTo()
             //2.判斷被Math.ceil取值後的rollData.num屬性在x*h前後值相差絕對值為1的情況
             //之所以進行上邊的2操作，是因為在打印Math.ceil(rollData.num)值時發現有時
                 //會和x*h前後相差1
                    if (Math.ceil(rollData.num) + 1 == h * x) {
                        window.scrollTo(0, Math.ceil(rollData.num) + 1);
                    } else if (Math.ceil(rollData.num) - 1 == h * x) {
                        window.scrollTo(0, Math.ceil(rollData.num) - 1);
                    } else {
                        window.scrollTo(0, Math.ceil(rollData.num));
                    }
                }, 30);
 
                /*5秒後符合條件的情況下，可清除pagelist[x].rollCount計數器器
                 *阻止上邊的計數器一直不停地運作
                 * */
                setTimeout(function () {
                    //五秒後，如果Math.ceil(rollData.num)，以及前後相差1符合條件，
                        //就清除上邊的計時器
                    if (Math.ceil(rollData.num) + 1 == h * x || 
                           Math.ceil(rollData.num) - 1 == h * x || 
                               Math.ceil(rollData.num) == h * x) {
                        console.log("自動清除" + x);
                        clearInterval(pagelist[x].rollCount);
                    }
                }, 5000);
            }
        }
    }
 
    addLoadEvent(rollingPage);
    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function () {
                oldonload();
                func();
            }
        }
    }
</script>
</body>
</html>

在做完上邊的優化之後，發現自己今後還是要多讀書，多去開源網站看高手們寫的代碼，還要不斷地發揮自己的想象力去完善自己的代碼。

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：