摘要：根據(jù)老師課程的思路。自己寫的代碼。可能和老師的代碼不一樣。在這里主要是想鍛煉一下自己使用 for循環(huán)遍歷元素出來，然后對元素進(jìn)行操作。之前對于for循環(huán)比較陌生。很少用到?，F(xiàn)在多在案例里面使用一下。多動腦，勤動手<!DOCTYPE html><html><head lang="en"> <meta charse
根據(jù)老師課程的思路。自己寫的代碼?？赡芎屠蠋煹拇a不一樣。在這里主要是想鍛煉一下自己使用 for循環(huán)遍歷元素出來，然后對元素進(jìn)行操作。
之前對于for循環(huán)比較陌生。很少用到?，F(xiàn)在多在案例里面使用一下。多動腦，勤動手
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.nav{width:900px;height:35px;line-height:35px;color:white;text-decoration:none;margin: 20px auto;border-radius:5px 5px 0 0;background-color: #148d00;position: relative}
.nav ul{margin: 0;padding:0}
.nav li{float: left;list-style: none;text-align: center;width: 120px;color: white;}
.nav li a{text-decoration: none;color: white}
.block{width:120px;position:absolute;top:35px;height:2px;background-color:#a30c01}
</style>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var Li, i,x
Li=document.getElementsByTagName('li');
for(i=0;i<Li.length;i++){
$(Li[i]).hover(function(){
x=($(this).index())*120+'px';
$('.block').stop().animate({"left":x},500)
},
function(){
$('.block').stop().animate({"left":0},500)
}
)
}
})
</script>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關(guān)于我們</a></li>
<li><a href="#">聯(lián)系我們</a></li>
<li><a href="#">新聞中心</a></li>
<li><a href="#">產(chǎn)品中心</a></li>
<li><a href="#">最新資訊</a></li>
<li><a href="#">熱點動態(tài)</a></li>
</ul>
<div class="block"></div>
</div>
</body>
</html>
批改老師：西門大官人批改時間：2019-01-09 11:45:17
老師總結(jié)：除了for循環(huán)外，還可以使用jquery的$.each更方便的完成循環(huán)。如果對css熟悉的話，最好使用css實現(xiàn)該功能，效果比js要好很多。js在執(zhí)行的時候，內(nèi)部機(jī)制決定了可能不穩(wěn)定。當(dāng)然為了學(xué)習(xí)for可以這樣處理