摘要：//html: <div class="nav"> <ul class='onebox'> <li name='0'>首頁</li> <li name='1'>產品 <ul class='twobox'>

//html:

<div class="nav">

<ul class='onebox'>

<li name='0'>首頁</li>

<li name='1'>產品

<ul class='twobox'>

<li>II產品1</li>

<li>II產品2</li>

<li>II產品3</li>

<li>II產品4

<ul class='threebox'>

<li>III產品1</li>

<li>III產品2</li>

<li>III產品3</li>

<li>III產品4</li>

<li>III產品5</li>

</ul>

</li>

<li>II產品5</li>

<li>II產品6</li>

</ul>

</li>

<li name='2'>新聞</li>

<li name='3'>技術支持</li>

<li name='4'>聯(lián)系客服</li>

<li name='5'>公司文化</li>

</ul>

<div id="block"></div>

<div class="cl"></div>

</div>

//css

.nav{

width: 1200px;

height: 30px;

background:#E81721;

margin: 0 auto;

box-shadow: 0px 5px 5px #646262;

position: relative; /*利用父相子絕,讓下面的#block相對父元素盒子而進行定位，而非body*/

}

#block{

width: 200px;

height: 2px;

background: #fff;

border-radius:8px;

opacity: 0.8;

position: absolute; /*為自定義動畫預設置定位*/

top:28px;

}

//jQuery

$(document).ready(function(){

//定義隨光標移動下滑線效果

$('.onebox>li').hover(function(){

var num = parseInt($(this).attr('name'))

result = num * 200

$('#block').stop().animate({

left:result+'px',

// width:'toggle'

opacity:'0.8'

},300);

});

});

總結：這節(jié)課覺得核心在于position定位的使用，#block利用在父元素盒子內(利用父相子絕法)通過mouse事件定義動畫效果隨光標移動。

批改老師：查無此人批改時間：2019-04-27 17:35:39
老師總結：完成的不錯，js很復雜，要耐心學習。繼續(xù)加油