下滑线跟着导航走作业
7202019-04-24 19:20:27142<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<title></title>
<style type="text/css">
*{padding: 0; margin: 0;}
ul li{ list-style: none;}
nav{ width: 100%; background: #ffa200; height: 50px; color: #fff;}
div{width: 1000px; margin: 0px auto; height: 50px; position: relative;}
ul{ width: 100%; height: 47px; line-height: 47px;}
ul li{ width:200px; text-align: center; box-sizing: border-box; display: block; float: left;}
ul li:first-child{border:none}
span{ width: 200px; background: #ff2200; height: 3px; display: block; position: absolute; left:0px;}
</style>
</head>
<body>
<nav>
<div>
<ul>
<li name='0'>首页</li>
<li name='1'>产品介绍</li>
<li name='2'>关于我们</li>
<li name='3'>联系我们</li>
<li name='4'>招聘信息</li>
</ul>
<span></span>
</div>
</nav>
<script type="text/javascript">
$(document).ready(function(){
$('li').hover(
function(){
$spanW=parseInt($(this).attr('name'))*200;
//alert($spanW);
$('span').stop().animate({left:$spanW+'px'},500);
},
function(){
$('span').stop().animate({left:'0px'},500);
}
);
});
</script>
</body>
</html>