<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="static/jQuery/jquery-3.3.1.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.clear{clear: both;}
.box{
height: 80px;width: 1920px;background: #ff9c01;
box-shadow: 0px 6px 30px #000;
border-radius: 5px;
}
li{float: left;list-style: none;width: 300px;height: 70px;display: block;
text-align: center;line-height: 70px;font-size: 40px;font-weight: bold;
cursor: pointer;
}
ul{list-style: none}
.line{width: 200px;height: 10px;background: #fff;border-radius: 5px;margin-left: 50px;position: relative}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('li').hover(
// 鼠标移上div位移
function () {
// $distance获取每一个li应该位移多远(每一个li宽300)
//移上动作要加stop()，否则连续移动会延迟
$distance = parseInt($(this).attr('name'))*300;
$('.line').stop().animate({
left:$distance+'px',
},300);
},
// 鼠标移开div回到起始位置
function () {
$('.line').stop().animate({
left:0,
},300);
},
);
});
</script>
</head>
<body>
<div class="box">
<ul>
<li name="0">首页</li>
<li name="1">时事新闻</li>
<li name="2">娱乐节目</li>
<li name="3">汽车视频</li>
<li name="4">医疗养生</li>
<li name="5">体育运动</li>
<div class="clear"></div>
</ul>
<div class="line"></div>
</div>
</body>
</html>
