天猫弹性导航栏的实现关键知识点是定位，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; }
效果图：
