摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>下发线跟随导航</title> <script src="../jquery-3.3.1.min.js" t
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下发线跟随导航</title>
<script src="../jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
ul , li {margin:0px;padding:0px;list-style: none;}
.header{width:500px;margin:10px auto;background:#99e;height:33px;border-radius: 5px;position: relative;}
.uL li{float:left;width:100px;height:33px;line-height: 33px;font-size:15px;color:#fff;text-align: center;font-weight:600;cursor: pointer;}
.box{position: absolute;bottom:0px;width:100px;height:2px;background:#fff;}
</style>
</head>
<body>
<nav class="header">
<ul class="uL">
<li name="1">首页</li>
<li name="2">独孤九剑</li>
<li name="3">西行大话</li>
<li name="4">野球家拳</li>
<li name="5">冷月清空</li>
</ul>
<!-- 留白部分 -->
<div class="box"></div>
</nav>
<script type="text/javascript">
$(function(){
// 第一个函数是鼠标滑入,第二个函数是鼠标滑出
$('li').hover(
function(){
// 获取对应的元素属性
$x = (parseInt($(this).attr('name'))-1)*100;
$('.box').stop().animate({'left':$x+'px'},500)
},
function(){
//默认为第一个
$('.box').stop().animate({'left':'0px'},300)
}
);
});
</script>
</body>
</html>
批改老师：灭绝师太批改时间：2018-11-16 09:05:36
老师总结：下次可以附上作业完成图片，除了老师上课案例，可以拓展点知识
