摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="前端课件/jQuery/jquery-3.3.1.min.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="前端课件/jQuery/jquery-3.3.1.min.js"></script>
<style type="text/css">
*{margin:0px;padding: 0px}
.main{width: 500px;height: 40px;background-color: red;margin:20px auto;box-shadow: 0px 0px 20px red;border-radius: 4px;position: relative;}
.main ul{list-style: none;z-index: 20px;position: relative;font-size: 17px;}
.main li{width: 100px; line-height: 40px;float: left; cursor: pointer;text-align: center;color: white;font-weight: bold;}
.bottom_line{z-index: 10px;width: 100px;height: 2px;background-color: #fff;position: absolute;top: 38px;}
</style>
<script type="text/javascript">
$(function(){
//第一种
// $('.bt1').mouseover(function(){
// $('.bottom_line').css('left','0px')
// })
// $('.bt2').mouseover(function(){
// $('.bottom_line').css('left','100px')
// })
// $('.bt3').mouseover(function(){
// $('.bottom_line').css('left','200px')
// })
// $('.bt4').mouseover(function(){
// $('.bottom_line').css('left','300px')
// })
// $('.bt5').mouseover(function(){
// $('.bottom_line').css('left','400px')
// })
//第二种
// $('.bt1').mouseover(function(){
// $('.bottom_line').animate({left:'0px'},500)
// })
// $('.bt2').mouseover(function(){
// $('.bottom_line').animate({left:'100px'},500)
// })
// $('.bt3').mouseover(function(){
// $('.bottom_line').animate({left:'200px'},500)
// })
// $('.bt4').mouseover(function(){
// $('.bottom_line').animate({left:'300px'},500)
// })
// $('.bt5').mouseover(function(){
// $('.bottom_line').animate({left:'400px'},500)
// })
//教程中方法
$('li').hover(
function(){
$x=parseInt($(this).attr('name'))*100
$('.bottom_line').stop().animate({left:$x+'px'},300)
},
function(){
$('.bottom_line').stop().animate({left:'0px'},300)
})
})
</script>
</head>
<body>
<div class="main">
<ul>
<!-- <li class="bt1">公司简介</li>
<li class="bt2">产品介绍</li>
<li class="bt3">公司荣誉</li>
<li class="bt4">产品技术</li>
<li class="bt5">联系我们</li> -->
<li name="0">公司简介</li>
<li name="1">产品介绍</li>
<li name="2">公司荣誉</li>
<li name="3">产品技术</li>
<li name="4">联系我们</li>
</ul>
<div class="bottom_line" ></div>
</div>
</body>
</html>自己写了两种方法，但效果还是老师写的比较好，代码量少，效果好，还是要打好基础，不能学了新的，忘了旧的，基础很重要。
批改老师：灭绝师太批改时间：2018-11-11 09:24:12
老师总结：能自己测试，寻找方法，是很好的事情，后面会越来越好
