<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html+css+js实现导航栏色块跟随滑动</title>
<style>
* {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
html,
body {
height: 100%;
width: 100%;
background: black;
}
a {
text-decoration: none;
}
ul {
position: relative;
background: #fff;
overflow: hidden;
display: flex;
width: 50%;
border-radius: 15px;
height: 20px;
padding: 10px 0px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
ul li {
position: relative;
z-index: 10;
flex: 1;
text-align: center;
}
ul li a {
font-size:14px;
color: #333;
width: auto;
padding:0px 10px;
display: block;
text-align: center;
}
ul li a:hover{
font-weight: bold;
}
.bg {
width: 17%;
height: auto;
display: inline-block;
background: #fc0;
position: absolute;
left: 0;
top: 0px;
bottom: 0px;
margin: auto;
z-index: 2;
}
</style>
</head>
<body>
<ul>
<span class="bg"></span>
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">热播剧集</a>
</li>
<li>
<a href="javascript:;">最新电影</a>
</li>
<li>
<a href="javascript:;">影业资讯</a>
</li>
<li>
<a href="javascript:;">娱乐八卦</a>
</li>
<li>
<a href="javascript:;">明星图库</a>
</li>
</ul>
<script>
// 需求：鼠标经过哪个导航栏目，背景色滑动过去
var liList = document.getElementsByTagName('li');
var bg = document.getElementsByClassName('bg')[0];
var header = 0;
var liLeft = 0;
console.log(0);
// 添加事件
// 遍历li
for (var i = 0; i < liList.length; i++) {
liList[i].onmouseover = function () {
liLeft = this.offsetLeft + (this.offsetWidth - bg.offsetWidth) / 2;
}
}
// 使用定时器
setInterval(function () {
header = header + (liLeft - header) / 10;
bg.style.left = header + 'px';
}, 10)
</script>
</body>
</html>
