摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>下划线跟随导航</title> <script type="
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下划线跟随导航</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style type="text/css">
*{padding: 0px;margin: 0px;}
ul{list-style: none;z-index: 20;position:relative;font-size: 15px;}
li{float:left;cursor: pointer;width:100px;height:30px;text-align: center;
line-height: 30px;color:#fff;font-weight: bold;}
.menu{width:500px;position:relative;margin: 20px auto;height:32px;
box-shadow: 0 2px 20px #000;background: #AF3434;border-radius: 3px;}
</style>
<script type="text/javascript">
$(function(){ //文档就绪函数
$('li').hover(
function(){
$x=parseInt($(this).attr('name'))*100
$('.block').stop().animate({left:$x+'px'},500)
},
function(){
$('.block').stop().animate({left:'0px'},500)
}
)
})
</script>
</head>
<body>
<div class="menu">
<ul>
<li name="0">首页</li>
<li name="1">php</li>
<li name="2">javascript</li>
<li name="3">jquery</li>
<li name="4">html</li>
</ul>
<div class="block" style="z-index: 10;width: 100px;height:2px;background: #fff;
position: absolute;top:30px;"></div>
</div>
</body>
</html>
总结：学到了文档就绪函数更简单的写法，同时用到了hover()函数，巩固了之前所学的函数，挺充实的，只是也想开始php的学习，一定得按顺序来吗？
批改老师：韦小宝批改时间：2018-11-01 10:50:51
老师总结：是的，最好还是得按照顺序来，到了PHP的时候可以结合着前端一起来完成自己的小案例，这样可以更快的提示我们的技术啊！
