天猫弹性导航栏的实现关键知识点是定位，offsetLeft，以及缓动动画的应用。

一下是对offsetxxx家族的概述：
１.offset英文译为“自己的”，在js中主要用于获取元素的尺寸

网页可见区域的宽：document.body.clientWidth

网页可见区域的高：document.body.clientHeight

网页可见区域的宽：document.body.offsetWidth

网页可见区域的高：document.body.offsetHeight

网页正文全文宽：document.body.scrollWidth

网页正文全文高：document.body.scrollHeight

网页被卷去的高：document.body,scrollTop

网页被卷去的左间距：document.body.scrollLeft

２.offsetWidth与offsetHeight

获取对象的宽度和高度，主要包括三部分的内容：内容，边框，内边距；

即：offsetWidth=width+padding+border;

       offsetHeight=height+padding+border;

#box{
    width:400px;
    height:150px;
    padding:10px;
    border-left:3px solid #ccc;
}

以上代码中的offsetWidth=width+padding+border=400+20+3=423;

                     offsetHeight=height+padding+border=150+20+0=170;

３.offsetTop与offsetLeft

用于获取距离第一个有定位的父级盒子左边距和上边距；

注：父级盒子必须要有定位，如果没有定位，则最终以body为准；

４.offsetParent

返回当前父级盒子，可能是父亲也可能是爷爷，即返回的是有css定位的父级盒子；

parentNode 返回的是离他最近的父级元素；

注：如果当前元素的父级元素没有进行css定位(position:relative或aboolute)，如果有css定位，则offsetParen取定位的父级元素；

５.offsetXXX与style.XXX的区别

以offsetLeft与style.left为例：

style.left只能取到行内，offsetLeft可以取到所有；

style.left只能返回有定位的盒子，offsetLeft可以返回没有定位的盒子；

style.left返回的是字符串，offsetLeft返回的是数字；

style.left是可以读写更改的，offsetLeft是只读的不可以更改；

 

如果没有给当前的元素指定top样式，则style.top返回的是空字符串

 

 

以下是天猫弹性导航栏的HTML代码：

<!DCOTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>天猫弹性导航栏</title>
   <link rel="stylesheet" href="style.css">
</head>
<body>
     <nav id="box">
           <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>
     <script src="index.js"></script>

</body>
</html>

style.css:

            *{
                padding: 0;
                margin: 0;
                list-style: none;
            }
            body{
                background-color: skyblue;
            }
            #box{
                width: 900px;
                height: 63px;
                background: #fff url("./images/doubleOne.png") no-repeat right center;
                border-radius: 10px;
                margin: 100px auto;
                position: relative;
            }
            #box ul{
                position: relative;
            }
            #box ul li{
                width: 88px;
                height: 63px;
                float: left;
                text-align: center;
                line-height: 70px;
            }
            #t_mall{
                width: 88px;
                height: 63px;
                background: url("./images/tMall.png") no-repeat;
                position: absolute;
            }

index.js:

            window.onload=function(){
                let nav=$("box");
                let t_mall=nav.children[0];
                let ul=nav.children[1];
                let allLis=ul.children;

                //定义一个变量，记录鼠标按下的位置
                let beginX=0;

                //遍历所有的li元素，监听事件
                for(let i=0;i<allLis.length;i++){
                    let li=allLis[i];
                    //监听鼠标移入事件
                    li.onmouseover=function(){
                        let offsetLeft=this.offsetLeft;
                        end=offsetLeft;
                    }
                    //监听鼠标移出事件
                    li.onmouseout=function(){
                        end=beginX;
                    }
                    //监听鼠标按下事件
                    li.onmousedown=function(){
                        beginX=this.offsetLeft;
                    }
                }
                //创建缓动动画
                let begin=0;
                let end=0;
                //开启定时器
                setInterval(function(){
                    //缓动公式
                    begin=begin+(end-begin)*0.2;
                    t_mall.style.left=begin+"px";
                },30);
            }
            function $(id){
                return typeof id==="string"?document.getElementById(id):null;
            }

 

效果图：