下划线跟随导航
利用给导航条里的每个li元素设置一个固定属性值数字,
利用这个数字来判断是第几个li,控制下划线的移动距离。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
width: 600px;
height: 60px;
background: green;
margin: 0 auto;
border-radius: 5px;
box-shadow: 2px 2px 10px black;
z-index:10;
position:relative;
}
ul li{
list-style: none;
float: left;
width: 100px;
line-height: 60px;
font-size: 1.5rem;
text-align: center;
margin: 0 auto;
}
ul li:hover{color: red;cursor: pointer;}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li id="0">苹果</li>
<li id="1">香蕉</li>
<li id="2">橘子</li>
<li id="3">西瓜</li>
<li id="4">橙子</li>
<div id="block" style="z-index:20;height: 5px;width: 100px;background: black;border-radius:50%;position: absolute;top: 50px"></div>
</ul>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function () {
$('li').hover(function () {
var $xx = parseInt($(this).attr('id'))*100+40;
$('#block').stop().animate({left:$xx+'px'},200);
},function () {
$('#block').stop().animate({left:'40px'},200);
});
});
</script>
</body>
</html>