abstrakt：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>跟隨導(dǎo)航</title><script src="jqu/jq_3.3.1_mi.js"></script>&l
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跟隨導(dǎo)航</title>
<script src="jqu/jq_3.3.1_mi.js"></script>
<style>
body{margin: 0;padding: 0;}
.box{
width: 100%;
background: #2e2e2e;
}
.nav{
width: 1200px;
height: 35px;
background: #2e2e2e;
margin: 0px auto;
position: relative;
}
.nav ul{
overflow: hidden;
margin: 0px;
padding: 0px;
}
.nav li{
list-style: none;
width: 120px;
float: left;
text-align: center;
}
.nav li a{
text-decoration: none;
color: #fff;
font-size: 14px;
line-height: 35px;
}
.top{
width: 120px;
height:2px;
background:#f60;
position: absolute;
z-index:99;
top:33px;
}
</style>
<script>
$(function(){
$('li').hover(
function(){
$v=parseInt($(this).attr('name'))*120;
$('.top').stop().animate({left:$v+'px'},300);
},
function(){
$('.top').stop().animate({left:'0px'},300);
}
)
})
</script>
</head>
<body>
<div class="box">
<div class="nav">
<ul>
<li name="0"><a href="">首頁(yè)</a></li>
<li name="1"><a href="">關(guān)于我們</a></li>
<li name="2"><a href="">產(chǎn)品中心</a></li>
<li name="3"><a href="">技術(shù)支持</a></li>
<li name="4"><a href="">聯(lián)系我們</a></li>
</ul>
<div class="top"></div>
</div>
</div>
</body>
</html>
Korrigierender Lehrer：西門大官人Korrekturzeit：2019-02-17 13:28:06
Zusammenfassung des Lehrers：作業(yè)寫的很好，這種效果還可以通過(guò)css來(lái)完成。實(shí)踐中推薦用css