jQuery导航移动下划线
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<style>nav-animate</style>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.menu{
width: 600px;
height: 35px;
border-radius: 10px;
background: #CCCCCC;
background: #000000;
margin: 20px auto;
position: relative;
box-shadow: 0 2px 20px #000;
}
ul {
list-style: none;
position: relative;
z-index: 20px;
}
li{
width: 100px;
height: 35px;
float: left;
text-align: center;
line-height: 35px;
font-size: 14px;
color: #FFFFFF;
cursor: pointer;
}
.ls-x{
width: 85px;
height: 2px;
background: #FFFFFF;
position: absolute;
top: 35px;
z-index: 10px;
}
</style>
<script>
$(function(){
$('li').hover(
function(){
$x=parseInt($(this).attr('name'))*100
$('.ls-x').stop().animate({left:$x+'px'},500)
},function(){
$('.ls-x').stop().animate({left:'0px'},500)
})
})
</script>
</head>
<body>
<div class="menu">
<ul>
<li name="0">php</li>
<li name="1">html</li>
<li name="2">css</li>
<li name="3">JavaScript</li>
<li name="4">vue</li>
<li name="5">layui</li>
</ul>
<div class="ls-x"></div>
</div>
</body>
</html>
<!--parseInt :返回一个整数-->
<!--attr()设置或返回被选元素的属性值-->
<!--总结：1、获取li添加hover执行function函数内部代码 2、将name的值转换为整数x100（每次移动的距离）并存储到变量$xz中方便调用 3、获取ls-x并暂时停止.stop（）.animate({left:'0px'})在进行动画 4、鼠标离开后ls-x回到原位0px-->