abstract：index.html：<!doctype html><html><head> <meta charset="UTF-8"> <title>导航(下划线跟随)</title> <link rel="styleshee
index.html：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>导航(下划线跟随)</title>
<link rel="stylesheet" href="static/css/style.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="static/js/style.js"></script>
</head>
<body>
<nav>
<ul>
<li leave="0">既然</li>
<li leave="1">琴瑟</li>
<li leave="2">起，</li>
<li leave="3">何以</li>
<li leave="4">笙箫</li>
<li leave="5">默。</li>
</ul>
<div></div>
</nav>
</body>
</html>
style.css：
*{margin: 0; padding: 0;}
ul{
font-size: 18px;
}
li{
list-style: none;
float: left;
height: 60px;
width: 100px;
text-align: center;
line-height: 60px;
color: coral;
font-weight: bold;
transition: 0.7s;
background-color: #dfe9ff;
position: relative;
}
li:hover{
background-color: #c5ff8b;
box-shadow: 1px 2px 30px #ccc;
margin: 5px;
top: -10px;
}
nav{
width: 650px;
margin: 30px auto;
height: 60px;
border-radius: 5px;
position: relative;
}
.block{
width: 110px;
height: 3px;
background-color: #f5dc9c;
position: absolute;
top: 60px;
}
style.js：
$(function () {
$('li').hover(function () {
$x = parseInt($(this).attr('leave'))*100;
$('.block').stop().animate({left: $x+'px'},200);
},function () {
$('.block').stop().animate({left: 0+'px'},200);
});
});
演示地址 -> http://47.107.64.136/jQuery/6/
Correcting teacher：韦小宝Correction time：2019-02-01 09:15:39
Teacher's summary：写的很不错 样式也很好看 像这种基础一定要多练习