带有动画效果的导航作业
//html:
<body>
<!-- nav -->
<div class="nav">
<ul>
<li name='0'>首页</li>
<li name='1'>产品</li>
<li name='2'>新闻</li>
<li name='3'>技术支持</li>
<li name='4'>联系客服</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; /*置顶权重*/
position: absolute; /*为自定义动画预设置定位*/
}
.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)
})