javascript實現(xiàn)全屏頁面滾動效果

更新時間：2021年10月09日 11:11:23 作者：三水汪

這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)全屏頁面滾動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在我讀完javaScript DOM之后，對解釋型的javaScript腳本語言有了更加深刻的感悟和理解，并使我的javaScript代碼更加規(guī)范化。

接下來，我們轉(zhuǎn)入今天我要分享的技術(shù)性問題：全屏頁面實現(xiàn)滾動。

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

先來看看，最后完成的兩個效果圖，以及console.log打印出來的內(nèi)容：

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

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

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

在點擊之后，會先判斷pagelist[this.index].rollCount計時器是否存在，存在則清除；如果已經(jīng)到達(dá)點擊對應(yīng)的頁面完后會打印出不執(zhí)行，并return

具體請看下邊例子，具體各種情況已經(jīng)做出詳細(xì)說明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏翻頁效果實現(xiàn)</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;
 
            //給當(dāng)前的元素定義一個index對象,保存當(dāng)前元素的下標(biāo)
            navlist[i].index = i;
 
            //以對象聲明變量
            var rollData = {
                num: 0,
                target: 0
            };
            navlist[i].onclick = function () {
 
                //被點擊的按鈕相對應(yīng)的頁面距離整個頁面頂部的距離
                rollData.target = pagelist[this.index].offsetTop;
 
                //判斷被點擊的是否是當(dāng)前的，是的話就不繼續(xù)執(zhí)行
                var h = window.innerHeight || document.documentElement.clientHeight 
                    || document.body.clientHeight;
                var x = this.index;
                //判斷當(dāng)前點擊的按鈕對應(yīng)的頁面是否存在元素屬性計時器
                if (pagelist[this.index].rollCount) {
                    console.log("存在");
                    clearInterval(pagelist[this.index].rollCount);
 
                    /*防止連續(xù)點擊造成直接return致使頁面沒加載完，因此添加判斷來遏制。
                     *這樣即使頁面沒完全到達(dá)，哪怕上邊清除后，
                       *也會繼續(xù)向下執(zhí)行計數(shù)器pagelist[this.index].rollCount
                     * */
                    /*但是發(fā)現(xiàn)事情終究不會很完美，需要不斷地改進(jìn)。
                     *在我和朋友聊天的一瞬間，再次點擊了當(dāng)前頁面對應(yīng)的按鈕，
                       *卻發(fā)現(xiàn)沒有執(zhí)行下邊return.
                     *再看看計數(shù)器中打印的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("不執(zhí)行");
                        //如果存在并且滾動條滾動到的數(shù)值與當(dāng)前頁面的相等，
                          //則不向下執(zhí)行計數(shù)器。
                        return;
                    }
                }
 
                //計時器進(jìn)行頁面滾動
                pagelist[this.index].rollCount = setInterval(function () {
                    //Math.ceil()向大于方向進(jìn)行舍入
                    rollData.num = rollData.num + 
                                     (rollData.target - rollData.num) / 10;
                    console.log(Math.ceil(rollData.num));
              //1.使?jié)L動條到與h*x的位置， window.scrollTo()
             //2.判斷被Math.ceil取值后的rollData.num屬性在x*h前后值相差絕對值為1的情況
             //之所以進(jìn)行上邊的2操作，是因為在打印Math.ceil(rollData.num)值時發(fā)現(xiàn)有時
                 //會和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計數(shù)器器
                 *阻止上邊的計數(shù)器一直不停地運(yùn)作
                 * */
                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>

在做完上邊的優(yōu)化之后，發(fā)現(xiàn)自己今后還是要多讀書，多去開源網(wǎng)站看高手們寫的代碼，還要不斷地發(fā)揮自己的想象力去完善自己的代碼。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: