abstrakt：//html: <div class="nav"> <ul class='onebox'> <li name='0'>首頁(yè)</li> <li name='1'>產(chǎn)品 <ul class='twobox'>
//html:
<div class="nav">
<ul class='onebox'>
<li name='0'>首頁(yè)</li>
<li name='1'>產(chǎn)品
<ul class='twobox'>
<li>II產(chǎn)品1</li>
<li>II產(chǎn)品2</li>
<li>II產(chǎn)品3</li>
<li>II產(chǎn)品4
<ul class='threebox'>
<li>III產(chǎn)品1</li>
<li>III產(chǎn)品2</li>
<li>III產(chǎn)品3</li>
<li>III產(chǎn)品4</li>
<li>III產(chǎn)品5</li>
</ul>
</li>
<li>II產(chǎn)品5</li>
<li>II產(chǎn)品6</li>
</ul>
</li>
<li name='2'>新聞</li>
<li name='3'>技術(shù)支持</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相對(duì)父元素盒子而進(jìn)行定位，而非body*/
}
#block{
width: 200px;
height: 2px;
background: #fff;
border-radius:8px;
opacity: 0.8;
position: absolute; /*為自定義動(dòng)畫(huà)預(yù)設(shè)置定位*/
top:28px;
}
//jQuery
$(document).ready(function(){
//定義隨光標(biāo)移動(dòng)下滑線效果
$('.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é)：這節(jié)課覺(jué)得核心在于position定位的使用，#block利用在父元素盒子內(nèi)(利用父相子絕法)通過(guò)mouse事件定義動(dòng)畫(huà)效果隨光標(biāo)移動(dòng)。
Korrigierender Lehrer：查無(wú)此人Korrekturzeit：2019-04-27 17:35:39
Zusammenfassung des Lehrers：完成的不錯(cuò)，js很復(fù)雜，要耐心學(xué)習(xí)。繼續(xù)加油