javascript實(shí)現(xiàn)全屏頁(yè)面滾動(dòng)效果

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

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

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

接下來(lái)，我們轉(zhuǎn)入今天我要分享的技術(shù)性問(wèn)題：全屏頁(yè)面實(shí)現(xiàn)滾動(dòng)。

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

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

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全屏翻頁(yè)效果實(shí)現(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>頁(yè)面1</li>
    <li>頁(yè)面2</li>
    <li>頁(yè)面3</li>
    <li>頁(yè)面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)前的元素定義一個(gè)index對(duì)象,保存當(dāng)前元素的下標(biāo)
            navlist[i].index = i;
 
            //以對(duì)象聲明變量
            var rollData = {
                num: 0,
                target: 0
            };
            navlist[i].onclick = function () {
 
                //被點(diǎn)擊的按鈕相對(duì)應(yīng)的頁(yè)面距離整個(gè)頁(yè)面頂部的距離
                rollData.target = pagelist[this.index].offsetTop;
 
                //判斷被點(diǎn)擊的是否是當(dāng)前的，是的話就不繼續(xù)執(zhí)行
                var h = window.innerHeight || document.documentElement.clientHeight 
                    || document.body.clientHeight;
                var x = this.index;
                //判斷當(dāng)前點(diǎn)擊的按鈕對(duì)應(yīng)的頁(yè)面是否存在元素屬性計(jì)時(shí)器
                if (pagelist[this.index].rollCount) {
                    console.log("存在");
                    clearInterval(pagelist[this.index].rollCount);
 
                    /*防止連續(xù)點(diǎn)擊造成直接return致使頁(yè)面沒(méi)加載完，因此添加判斷來(lái)遏制。
                     *這樣即使頁(yè)面沒(méi)完全到達(dá)，哪怕上邊清除后，
                       *也會(huì)繼續(xù)向下執(zhí)行計(jì)數(shù)器pagelist[this.index].rollCount
                     * */
                    /*但是發(fā)現(xiàn)事情終究不會(huì)很完美，需要不斷地改進(jìn)。
                     *在我和朋友聊天的一瞬間，再次點(diǎn)擊了當(dāng)前頁(yè)面對(duì)應(yīng)的按鈕，
                       *卻發(fā)現(xiàn)沒(méi)有執(zhí)行下邊return.
                     *再看看計(jì)數(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í)行");
                        //如果存在并且滾動(dòng)條滾動(dòng)到的數(shù)值與當(dāng)前頁(yè)面的相等，
                          //則不向下執(zhí)行計(jì)數(shù)器。
                        return;
                    }
                }
 
                //計(jì)時(shí)器進(jìn)行頁(yè)面滾動(dòng)
                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動(dòng)條到與h*x的位置， window.scrollTo()
             //2.判斷被Math.ceil取值后的rollData.num屬性在x*h前后值相差絕對(duì)值為1的情況
             //之所以進(jìn)行上邊的2操作，是因?yàn)樵诖蛴ath.ceil(rollData.num)值時(shí)發(fā)現(xiàn)有時(shí)
                 //會(huì)和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計(jì)數(shù)器器
                 *阻止上邊的計(jì)數(shù)器一直不停地運(yùn)作
                 * */
                setTimeout(function () {
                    //五秒后，如果Math.ceil(rollData.num)，以及前后相差1符合條件，
                        //就清除上邊的計(jì)時(shí)器
                    if (Math.ceil(rollData.num) + 1 == h * x || 
                           Math.ceil(rollData.num) - 1 == h * x || 
                               Math.ceil(rollData.num) == h * x) {
                        console.log("自動(dòng)清除" + 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)自己今后還是要多讀書，多去開(kāi)源網(wǎng)站看高手們寫的代碼，還要不斷地發(fā)揮自己的想象力去完善自己的代碼。

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

您可能感興趣的文章: