天猫弹性导航栏的实现关键知识点是定位,offsetLeft,以及缓动动画的应用。
一下是对offsetxxx家族的概述:
1.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
2.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;
3.offsetTop与offsetLeft
用于获取距离第一个有定位的父级盒子左边距和上边距;
注:父级盒子必须要有定位,如果没有定位,则最终以body为准;
4.offsetParent
返回当前父级盒子,可能是父亲也可能是爷爷,即返回的是有css定位的父级盒子;
parentNode 返回的是离他最近的父级元素;
注:如果当前元素的父级元素没有进行css定位(position:relative或aboolute),如果有css定位,则offsetParen取定位的父级元素;
5.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.οnlοad=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.οnmοuseοver=function(){ let offsetLeft=this.offsetLeft; end=offsetLeft; } //监听鼠标移出事件 li.οnmοuseοut=function(){ end=beginX; } //监听鼠标按下事件 li.οnmοusedοwn=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; }
效果图: