这几日学习html，一直在B站乱逛，发现网站的动效做的真好。然后翻到了这一页：
点此查看
上面的导航栏是一个下划线跟随的效果。由于有一个初始的选项（当前页面对应标签保持蓝色），鼠标划过时除了高亮项下面的下划线也要跟随。如果只实现前面这些效果可以用css完成，但是其实这里面的下划线是一个动画效果，仔细观察发现下划线相当于在border-bottom上面做水平运动，切换标签时有一个过渡效果，因此实际上这个下划线其实是一个独立的bar滑块
结构定义如下：
<div class="nav"><ul><li class="now" id="cur"><a href="#">综合</a></li><li><a href="#">视频</a></li><li><a href="#">番剧</a></li><li><a href="#">影视</a></li><li><a href="#">直播</a></li></ul><div class="go hover_bar"></div></div>
nav的position设为相对位移，div如下：
.go {width: 32px;height: 3px;background-color: #00a1d6;position: absolute;left: 0;bottom: 0;transition: all .2s cubic-bezier(0.215, 0.610, 0.355, 1) 0s;}
假定每个标签的宽度间距固定，那么只要在js中监听鼠标事件，让bar移动n个标签的距离即可.js代码如下
<script>ul = document.getElementsByTagName("ul")[0].children;sub_active = document.getElementById("sub_active");var str = "hello world";sub_active_pos_left = sub_active.offsetLeft;nav_bar = document.getElementById("nav_bar");for (let i = 0; i < ul.length; i++) {ul[i].addEventListener("mouseenter", function (oEvent) {var str = "hello world";nav_bar.style.left = this.offsetLeft + "px";});ul[i].addEventListener("mouseleave", function () {nav_bar.style.left = sub_active_pos_left + "px";});}</script>
