仿今日頭條橫向滾動導航欄--原生js

咳咳！先打一波小廣告，在上一篇里忘記了，那啥……我的那個個人博客做好了-->(我的博客)<--。嘿嘿

好嘞，言歸正傳，說說我們的效果。

其實就是實現橫向滑動，進行選擇。

原理：

• 鼠標按下，獲取當前鼠標坐標，作為起始坐標；
• 鼠標移動，獲取坐標，與起始坐標進行一系列的數學運算；
• 給 left 賦值，改變位置；
• 移動過多，超過時進行處理。

function scrollTabX() {
    let nav = document.getElementById("nav");
    let navs = document.getElementsByTagName("li");
    let navbar = document.getElementsByClassName("navbar")[0];
    let left = nav.style.left;      // ul 距離左邊的距離
    let totalWidth = 0;             // 總寬度
    let minusValue = 0;             // 設備寬度與總寬度的差值

    left = left ? left : 0;         // 初始時 ul 距離左邊 0px
    // 獲取所有 li 所占用的寬度
    for (let i = 0; i < navs.length; i++) totalWidth += navs[i].offsetWidth;
    // 固定 ul 的寬度
    nav.style.width = totalWidth + 'px';
    minusValue = window.screen.width - totalWidth;

    // 當設備寬度小於 ul 寬度的時候，執行水平滾動
    if (minusValue < 0) {
        (function () {
            nav.onmousedown = function (ev) {
                let e = ev || event;
                // 獲取鼠標的位置信息
                let startX = e.screenX;
                nav.onmousemove = function (e) {
                    left += (e.screenX - startX) / 10;
                    nav.style.left = left + 'px';
                }
            }
            nav.onmouseup = function () {
                nav.onmousemove = null;
                // 拉多了，要回來呢，兄弟
                if (left > 0) {
                    let timer = setInterval(function () {
                        left -= 50;
                        if (left <= 0) {
                            left = 0;
                            clearInterval(timer);
                        }
                        nav.style.left = left + 'px';
                    }, 20);
                }
                if (left < minusValue) {
                    let timer = setInterval(function () {
                        left += 50;
                        if (left >= minusValue) {
                            left = minusValue - 10;   // 有個 10px 的 padding
                            clearInterval(timer);
                        }
                        nav.style.left = left + 'px';
                    }, 20);
                }
                // 去掉陰影
                navbar.style.boxShadow = (left <= minusValue) ? "0 0 0 #fff" : "-5px 0 10px #fff inset";
            }
        })();
    }
}

效果圖（動圖不會哎）：

反正想像一下效果就好了，哈哈。

至於說這篇寫的不怎么樣，我為什么還要置頂？……當然是因為我的博客啦！