<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>導航條滑動</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
width: 1049px;
margin: 20px auto;
position: relative;
background-color: #333131;
}
ul{
overflow: hidden;
}
ul li{
float:left;
list-style: none;
width: 130px;
height: 40px;
border-right: 1px solid white;
text-align: center;
line-height: 40px;
font-size: 14px;
color: white;
}
#nav-bar{
width: 132px;
height:5px;
background-color: #ee372a;
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>網站首頁</li>
<li>關於我們</li>
<li>免費認證</li>
<li>政府扶持</li>
<li>知識產權</li>
<li>上市服務</li>
<li>人才招聘</li>
<li>聯繫我們</li>
</ul>
<div id="nav-bar"></div>
<script>
//導航條的切換就是下滑線的位置改變，
//定義一個對象 獲取id爲"nav-bar"的標籤
var navBar = document.getElementById("nav-bar")
var lis = document.getElementsByTagName("li");
var currentX = 0;
var beginX = 0;
//導航條改變位置的計算
for(var i=0;i<lis.length;i++){
lis[i].onmouseover = function(event){
var e = window.event||event;
currentX = this.offsetLeft;
console.log(currentX);
}
}
//滑動的實質是將改變的過程放慢了
setInterval(function(){
//begin每次所處位置應該是每一份距離加上前面已經走了的距離
beginX = beginX + (currentX-beginX)/10;
//加上單位 20的意思就是隔20毫秒執行
navBar.style.left = beginX +"px";
},20);
</script>
</div>
</body>
</html>
