摘要：<!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">產(chǎn)品介紹</li>
<li class="bt3">公司榮譽</li>
<li class="bt4">產(chǎn)品技術(shù)</li>
<li class="bt5">聯(lián)系我們</li> -->
<li name="0">公司簡介</li>
<li name="1">產(chǎn)品介紹</li>
<li name="2">公司榮譽</li>
<li name="3">產(chǎn)品技術(shù)</li>
<li name="4">聯(lián)系我們</li>
</ul>
<div class="bottom_line" ></div>
</div>
</body>
</html>自己寫了兩種方法，但效果還是老師寫的比較好，代碼量少，效果好，還是要打好基礎(chǔ)，不能學了新的，忘了舊的，基礎(chǔ)很重要。
批改老師：滅絕師太批改時間：2018-11-11 09:24:12
老師總結(jié)：能自己測試，尋找方法，是很好的事情，后面會越來越好