欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實現(xiàn)電梯導(dǎo)航效果的示例代碼

 更新時間：2023年12月11日 14:05:56   作者：LxyingINGing  
這篇文章主要介紹了JavaScript實現(xiàn)電梯導(dǎo)航效果的相關(guān)知識,文中通過示例代碼介紹的很詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧

頁面往下滑動到一定距離時，電梯導(dǎo)航顯示，且與內(nèi)容板塊相呼應(yīng)。使用了選項卡的功能，采用排他思想等實現(xiàn)。效果如下圖所示：

代碼：

封裝函數(shù) move.js:       可直接調(diào)用，無需修改

function move(obj, target, callback) {  
    clearInterval(obj.timer); // 清除之前的定時器  
    obj.timer = setInterval(function () {  
        var header = window.scrollY;  
        var distance = target - header;  
        var speed = distance / 10;  
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  
        if (Math.abs(distance) <= Math.abs(speed)) { // 修改停止動畫的條件  
            console.log('aaa');  
            clearInterval(obj.timer); // 清除定時器  
            window.scrollTo(0, target); // 確保滾動到目標位置  
            callback && callback();  
        } else {  
            window.scrollTo(0, header + speed);  
        }  
    }, 15);  
}

 詳細代碼如下：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
 
        }
 
        .header {
            width: 1200px;
            height: 1000px;
            background-color: aqua;
            margin: 0 auto;
        }
 
        .floor1 {
            width: 1200px;
            height: 700px;
            background-color: rgba(255, 0, 0, 1);
            margin: 10px auto;
            font-size: 30px;
            text-align: center;
            line-height: 700px;
        }
 
        .floor2 {
            width: 1200px;
            height: 700px;
            background-color: rgba(255, 0, 0, 0.8);
            margin: 10px auto;
            font-size: 30px;
            text-align: center;
            line-height: 700px;
        }
 
        .floor3 {
            width: 1200px;
            height: 700px;
            background-color: rgba(255, 0, 0, 0.6);
            margin: 10px auto;
            font-size: 30px;
            text-align: center;
            line-height: 700px;
        }
 
        .floor4 {
            width: 1200px;
            height: 700px;
            background-color: rgba(255, 255, 0, 1);
            margin: 10px auto;
            font-size: 30px;
            text-align: center;
            line-height: 700px;
        }
 
        .floor5 {
            width: 1200px;
            height: 700px;
            background-color: rgba(255, 0, 255, 1);
            margin: 10px auto;
            font-size: 30px;
            text-align: center;
            line-height: 700px;
        }
 
        .floor6 {
            width: 1200px;
            height: 700px;
            background-color: rgba(255, 0, 0, 1);
            margin: 0 auto;
            font-size: 30px;
            text-align: center;
            line-height: 700px;
        }
 
        .floor7 {
            width: 1200px;
            height: 700px;
            background-color: rgba(255, 255, 0, 1);
            margin: 10px auto;
            font-size: 30px;
            text-align: center;
            line-height: 700px;
        }
 
        .floor8 {
            width: 1200px;
            height: 700px;
            background-color: rgba(255, 210, 0, 1);
            margin: 10px auto;
            font-size: 30px;
            text-align: center;
            line-height: 700px;
        }
 
        .floor9 {
            width: 1200px;
            height: 700px;
            background-color: rgba(255, 255, 0, 1);
            margin: 10px auto;
            font-size: 30px;
            text-align: center;
            line-height: 700px;
        }
 
        .floor10 {
            width: 1200px;
            height: 700px;
            background-color: rgba(255, 0, 255, 1);
            margin: 10px auto;
            font-size: 30px;
            text-align: center;
            line-height: 700px;
        }
 
        .floor11 {
            width: 1200px;
            height: 700px;
            background-color: rgba(255, 0, 0, 1);
            margin: 0 auto;
            font-size: 30px;
            text-align: center;
            line-height: 700px;
        }
 
        .footer {
            width: 1200px;
            height: 800px;
            background-color: rgba(0, 0, 0, 1);
            margin: 10px auto;
        }
 
 
        .elevator {
            width: 44px;
            height: auto;
            background: #e9e6e6;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translateX(-50%);
            /* z-index: 999; */
            margin: -266.5px 640px 0 0;
            margin-left: -650px;
            padding-bottom: 4px;
            display: none;
        }
 
        .elevator ul li {
            font-size: 12px;
            width: 28px;
            height: 29px;
            padding: 4px;
            color: #fff;
            text-align: center;
            margin: 4px 4px 0 4px;
            cursor: pointer;
            background: #655f61;
            line-height: 14px;
        }
 
        .elevator ul li:nth-child(1) {
            line-height: 29px;
            background: #ff1a66;
        }
 
        .elevator ul li:last-child {
            line-height: 29px;
            background: #acacac;
        }
 
        .elevator ul li:hover {
            background: #f69;
        }
 
        .elevator ul li.active {
            background: #f69;
        }
 
        .elevator ul li.r_active {
            background: #666;
        }
    </style>
</head>
 
<body>
    <div class="header"></div>
    <div class="floor1  f">黃金鉑金</div>
    <div class="floor2  f">投資金銀</div>
    <div class="floor3  f">鉆石</div>
    <div class="floor4  f">銀飾</div>
    <div class="floor5  f">彩色寶石</div>
    <div class="floor6  f">翡翠玉石</div>
    <div class="floor7  f">珍珠</div>
    <div class="floor8  f">流行飾品</div>
    <div class="floor9  f">天然木飾</div>
    <div class="floor10  f">奇趣收藏</div>
    <div class="floor11  f">眼鏡手表</div>
    <div class="footer"></div>
 
    <div class="elevator">
        <ul>
            <li>導(dǎo)航</li>
            <li class="item active">黃金鉑金</li>
            <li class="item">投資金銀</li>
            <li class="item">鉆石</li>
            <li class="item">銀飾</li>
            <li class="item">彩色寶石</li>
            <li class="item">翡翠玉石</li>
            <li class="item">珍珠</li>
            <li class="item">流行飾品</li>
            <li class="item">天然木飾</li>
            <li class="item">奇趣收藏</li>
            <li class="item">眼鏡手表</li>
            <li class="backtop"><a href="#" rel="external nofollow" ></a>頂部</li>
        </ul>
    </div>
    <script src="./js/move.js"></script>
    <script>
        (function () {
            //查節(jié)點對象
            var floor1 = document.querySelector('.floor1');
            var elevator = document.querySelector('.elevator');
            var items = document.querySelectorAll('.elevator li.item');
            var fs = document.querySelectorAll('.f');
            var backTop = document.querySelector('.elevator li.backtop');
            var footer=document.querySelector('.footer');
            //1.頁面滾動時電梯導(dǎo)航的顯示與隱藏效果
            load();
            function load() {
                //頁面卷進去的距離
                var disY = document.documentElement.scrollTop;
                //第一個樓層與頁面頂部的距離
                var dis = floor1.offsetTop - 200;
                if (disY >= dis) {
                    elevator.style.display = "block";
                } else {
                    elevator.style.display = "none";
                }
                //4.交互，相應(yīng)li對應(yīng)相應(yīng)樓層
                for (var i = 0; i < fs.length; i++) {
                    var fs_D_top = fs[i].offsetTop-100;
                    if (disY >= fs_D_top) {
                        document.querySelector('.elevator li.active').classList.remove('active');
                        items[i].classList.add('active');
                    }
                    //到最后一個樓層不再繼續(xù)往下變顏色
                    if(disY>footer.offsetTop){
                        document.querySelector('.elevator li.active').classList.add('r_active');
                    }else{
 
                        document.querySelector('.elevator li.active').classList.remove('r_active');
                    }
                }
            }
            //頁面滑動
            window.onscroll = function () {
                load();
            }
            //2.選項卡
            //單擊小li切換到對應(yīng)頁面
            for (let i = 0; i < items.length; i++) {
                items[i].onclick = function () {
                    document.querySelector('.elevator li.active').classList.remove('active');
                    this.classList.add('active');
                    //呼應(yīng)內(nèi)容區(qū)
                    move(window, fs[i].offsetTop)
                }
            }
            //3.返回頂部
            backTop.onclick = function () {
                move(window, 0);
            }
        })();        
    </script>
</body>
 
</html>

到此這篇關(guān)于js實現(xiàn)電梯導(dǎo)航效果的示例代碼的文章就介紹到這了,更多相關(guān)js電梯導(dǎo)航內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論