abstract：//html: <body> <!-- nav --> <div class="nav"> <ul> <li name='0'>首頁</li> <li name='1'>產(chǎn)品</li> <li name=&#
//html:
<body>
<!-- nav -->
<div class="nav">
<ul>
<li name='0'>首頁</li>
<li name='1'>產(chǎn)品</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>
<div class="box1"></div>
<input type="button" value="移動" id='bnt1'>
<input type="button" value="收回" id='bnt2'>
<input type="button" value="停止" id='bnt3'>
</body>
//css
*{
margin:0;
padding:0;
}
body{
font:12px 'Microsoft YaHei','宋體';
}
.cl{
clear:both;
}
.nav{
width: 1200px;
height: 30px;
background:#E81721;
margin: 0 auto;
box-shadow: 0px 5px 5px #646262;
position: relative; /*很好地利用父相子絕*/
}
.nav ul{
list-style: none;
}
.nav ul li{
float: left;
width: 200px;
text-align: center;
line-height: 30px;
height: 30px;
color: #fff;
}
#block{
width: 200px;
height: 30px;
background:#fff;
border: 2px solid #fff;
border-top:0px;
opacity: 0.3;
z-index: 10; /*置頂權(quán)重*/
position: absolute; /*為自定義動畫預(yù)設(shè)置定位*/
}
.box1{
width:200px;
height: 200px;
background:yellow;
margin:10px;
/*position: absolute;*/
position:relative;
}
//jQuery
$(document).ready(function(){
$('.box1').hover(function(){
$('.box1').animate({
left:'50px'
},500),
$('.box1').animate({
left:'0px'
},500)
})
$('.nav ul li').hover(function(){
var num = parseInt($(this).attr('name'))
result = num * 200
$('#block').stop().animate({
left:result+'px',
// width:'toggle'
borderBottom:'2px solid #fff',
opacity:'0.5'
},300)
})
Correcting teacher：查無此人Correction time：2019-04-27 17:38:31
Teacher's summary：完成的不錯。不過好像看到你的作業(yè)好幾次，但是都是一個作業(yè)。繼續(xù)加油。