摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/jQuery/jQuery-3.3.1.js"></script>
<script>
$(function(){
$('li').hover(
function(){
$x=parseInt($(this).attr('name'))*100 //parseInt()函数可解析一个字符串，并返回一个整数,attr()返回被选元素的属性值。
$('.box').stop().animate({left:$x+'px'},300)
},
function(){
$('.box').stop().animate({left:'0px'},300)
}
)
})
</script>
<style>
*{padding:0;margin:0;}
a{text-decoration: none;}
ul{list-style: none;position:relative;font-size: 15px;}
li{float:left;cursor:crosshair;width:100px;height: 30px;text-align:center;line-height:30px;color: #fff;font-weight: bold;}
.nav{width:500px;position:relative;margin:20px auto;height:32px;box-shadow: 5px 10px 15px rgb(149, 231, 146);background:pink;border-radius:5px }
.box{width:100px;height:2px;background:red;position:absolute;top:30px;border-radius: 2px;}
</style>
</head>
<body>
<div class="nav">
<ul>
<li name="0"><a href="#">首页</a></li>
<li name="1"><a href="#">相册</a></li>
<li name="2"><a href="#">日志</a><ll/li>
<li name="3"><a href="#">留言板</a></li>
<li name="4"><a href="#">个人资料</a></li>
</ul>
<div class="box"></div>
</div>
</body>
</html>parseInt()函数可解析一个字符串，并返回一个整数,attr()返回被选元素的属性值。
批改老师：查无此人批改时间：2019-01-14 18:05:37
老师总结：完成的不错，下次把代码缩进，看着整洁。继续加油。
