下划线跟随导航的动画效果总结
模范案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下划线跟随导航的动画效果</title>
<style type="text/css">
*{margin:0px;padding: 0px;}
.menu{width:500px;height:35px;background:#F92659;border-radius: 5px;box-shadow:0 2px 20px #000;margin:20px auto; line-height: 35px;text-align:center;position:relative;}
ul{list-style:none;position: relative;font-size: 15px;font-weight: bold;z-index:20;}
li{float: left;display: inline-block;width: 100px;cursor: pointer;}
</style>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){//$(function(){ jquery的代码块})是$(document).ready(function(){ jquery的代码块})的简写
$('li').hover(
function(){
$x=parseInt($(this).attr('name'))*100//获得li的name属性值,注意this不用加‘’号
$('.block').stop().animate({left:$x+'px'},500)
}
,
function(){
$('.block').stop().animate({left:'0px'},500)
}
)
})
</script>
<div>
<ul>
<li name="0">首页</li>
<li name="1">php中文网</li>
<li name="2">html</li>
<li name="3">JavaScript</li>
<li name="4">css</li>
</ul>
<div style="z-index:10;width:100px;height:2px;background:#fff;position:absolute;top:35px;"></div><!-- 这个布局的position要设置 -->
</div>
</body>
</html>