javascript實現全屏頁面滾動效果

在我讀完 DOM之後，對解釋型的Script語言有了更加深刻的感悟和理解，並使我的javaScript程式碼更加規範化。

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

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

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

1.點選頁面2效果，以及列印的結果：

javascript實現全屏頁面滾動效果

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

2.再次點選頁面2，以及列印的結果：

javascript實現全屏頁面滾動效果

在點選之後，會先判斷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>
http://www.cppcns.com 
</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;
      kWSIaMw 
          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操作，是因為在列印www.cppcns.comMath.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>

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

javascript實現全屏頁面滾動效果

javascript實現全屏頁面滾動效果

js+html實現大屏公告滾動效果

vue實現全屏滾動效果（非fullpage.js）

jquery實現全屏滾動效果

實現大屏數字滾動翻轉效果

iOS實現鎖屏頁面控制音樂播放

vue-cli點選實現全屏功能

JS實現長圖上下滾動效果

Unity實現全屏截圖以及QQ截圖

JavaScript實現簡單的彈窗效果

vue實現公告欄文字上下滾動效果的示例程式碼

js+css實現全屏側邊欄

Vue使用screenfull實現全屏

vue使用screenfull外掛實現全屏功能

JavaScript實現拖動對話方塊效果的實現程式碼

JavaScript實現圖片放大預覽效果

js實現全屏與退出全屏

JavaScript實現網頁下拉選單效果

JavaScript實現瀏覽器網頁自動滾動並點選的示例程式碼

C#窗體程式實現全屏及取消全屏步驟

javascript實現全屏頁面滾動效果

相關推薦