JavaScript仿天猫滑动导航栏

JavaScript仿天猫滑动导航栏使用的核心JavaScript知识点梳理：window.onload 事件页面所有资源加载完成后执行回调，确保DOM元素已存在，避免获取不到元素。

自定义函数 $

通过传入id字符串，使用document.getElementById返回对应元素，简化DOM获取操作。

变量声明与赋值

使用let声明局部变量，如nav、t_mall等，并获取DOM元素或数值。

children 属性

获取元素的子元素集合（只包含HTML元素，不包含文本节点），用于快速访问导航栏子项。

for 循环遍历

遍历allLis数组，为每个li绑定事件处理函数。

事件监听：mouseover / mousedown / mouseout

分别处理鼠标移入、按下、离开事件，触发相应逻辑。

this 关键字

在事件处理函数中指向触发事件的当前li元素，用于获取其offsetLeft等属性。

offsetLeft 属性

获取元素相对于其父元素左侧的偏移量，用于定位滑块的目标位置。

定时器 setInterval 与 clearInterval

使用setInterval重复执行动画函数，clearInterval停止动画，控制滑块移动。

缓动动画算法

begin = begin + (end - begin) * 0.1实现平滑移动，每次迭代靠近目标位置。

Math.abs 取绝对值

判断当前位置与目标距离是否小于0.5，若接近则直接定位并停止定时器，优化性能。

逻辑判断 if 语句

用于检查定时器是否存在、是否接近目标等，控制程序流程。

字符串拼接与类型判断

typeof id === "string"确保传入参数为字符串类型，增强函数健壮性。

console.log 调试

输出变量值到控制台，方便开发者查看运行状态和调试。

CSS样式操作

通过style.left动态修改滑块元素的left属性，实现位置变化。

html:

    <nav id="nav">
        <span id="t_mall"></span>
        <ul>
            <li>双11狂欢</li>
            <li>服装会场</li>
            <li>数码家电</li>
            <li>家具建材</li>
            <li>飞猪旅行</li>
            <li>母婴童装</li>
            <li>手机会场</li>
            <li>美妆会场</li>
            <li>进口会场</li>
        </ul>
    </nav>

css:

*{
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}
body{
    background-color: #fff;
}
#nav{
    width: 900px;
    height: 63px;
    background-image: url('../images/doubleOne.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-color: f7f7f7;
}
#nav ul{
    position: relative;
}
#nav ul li{
    float: left;
    width: 88px;
    height: 63px;
    text-align: center;
    line-height: 70px;
    cursor: pointer;
    transition: all 1s ease 0s;
}
#nav ul li:hover{
    color: #fff;
}
#t_mall{
    width: 88px;
    height: 63px;
    background-image: url('../images/tMall.png');
    background-repeat: no-repeat;
    position: absolute;
}

javascript：

   <script>
        window.onload=function(){
            function $(id){
                return typeof id === "string" ? document.getElementById(id):null;
            }
            //1 获取需要的标签
            // let nav = document.querySelector("#nav");
            let nav = $("nav");
            console.log(nav)
            let t_mall = nav.children[0];
            let ul = nav.children[1];
            let allLis = ul.children;
            console.log(t_mall,ul,allLis)

            //记录鼠标点击的位置
            let beginX = 0;
            let begin = 0, end = 0;
            let timer = null;

            //初始化滑块位置为第一个li
            if(allLis.length > 0){
                begin = end = allLis[0].offsetLeft;
                t_mall.style.left = begin + 'px';
            }

            //2 遍历li绑定事件
            for(let i=0; i<allLis.length; i++){
                let li = allLis[i];
                //console.log(li);

                //2.1 监听鼠标进入
                li.onmouseover = function(){
                    //清除之前的定时器
                    if(timer){
                        clearInterval(timer);
                        timer = null;
                    }
                    //设置目标位置为当前li的offsetLeft
                    end = this.offsetLeft;
                    //启动新定时器
                    timer = setInterval(function(){
                        begin = begin + (end - begin)*0.1;
                        console.log(begin)
                        t_mall.style.left = begin + "px";
                        //当前接近目标时，直接到达并清除定时器
                        if(Math.abs(begin-end)<0.5){
                            begin = end;
                            t_mall.style.left = begin+"px";
                            clearInterval(timer);
                            timer = null;
                        }
                    },10);
                }
                //2.2 监听鼠标按下事件
                li.onmousedown = function(){
                    beginX = this.offsetLeft;
                }
                // 2.3 监听鼠标离开事件
                li.onmouseout = function(){
                    //鼠标离开li，清除定时器
                    if(timer){
                        clearInterval(timer);
                        timer = null;
                    }
                    end = beginX;
                }
            }

        }
    </script>