<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>jQuery实现的向上弹出的仿flash效果的导航菜单</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background:#FC0 url(img/1.jpg);
}
a {
color:#FFF;
font-size:13px;
text-decoration:none;
}
#wrap {
margin:300px auto 0;
600px;
position:relative;
}
#navwrap {
600px;
height:50px;
background:#000;
position:absolute;
bottom:0;
left:0;
overflow:hidden;
}
#navwrap dl {
margin:10px;
_margin:10px 0;
120px;
color:#FFF;
float:left;
_140px;
_overflow:hidden;
}
#navwrap dl dt {
padding:0 10px;
height:26px;
line-height:26px;
100px;
}
#navwrap dl dt a {
font-weight:bold;
}
#navwrap dl dt a:hover {
color:#FF0;
}
#navwrap dl dd {
margin-left:-10px;
padding:0 10px;
height:20px;
line-height:20px;
120px;
display:none;
position:relative;
}
#navwrap dl dd a {
font-size:12px;
position:absolute;
120px;
height:20px;
top:0;
}
#navwrap dl dd span {
margin-left:-5px;
130px;
height:20px;
display:block;
background:#333;
}
</style>
</head>
<body>
<div id="wrap">
<div id="navwrap">
<dl>
<dt class="mover"><a href="#">导航1</a></dt>
<dd><span></span><a href="#">子导航1</a></dd>
</dl>
<dl>
<dt><a href="#">导航2</a></dt>
<dd><span></span><a href="#">子导航1</a></dd>
<dd><span></span><a href="#">子导航1</a></dd>
<dd><span></span><a href="#">子导航1</a></dd>
<dd><span></span><a href="#">子导航1</a></dd>
</dl>
<dl>
<dt><a href="#">导航3</a></dt>
<dd><span></span><a href="#">子导航1</a></dd>
<dd><span></span><a href="#">子导航1</a></dd>
<dd><span></span><a href="#">子导航1</a></dd>
</dl>
<dl>
<dt><a href="#">导航4</a></dt>
<dd><span></span><a href="#">子导航1</a></dd>
<dd><span></span><a href="#">子导航1</a></dd>
<dd><span></span><a href="#">子导航1</a></dd>
<dd><span></span><a href="#">子导航1</a></dd>
</dl>
</div>
</div>
<div id="test" style="margin:0 auto; 96%;word-wrap:break-word;"></div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
/**********Power By Mulder*********/
/*********qq:10221408***********/
/**********2008-11-19**************/
var wrapminh = 50; //nav框架高度
var wrapmaxh = 200; //nav框架变化后高度
var wraptime = 10; //nav变化间隔
var wrapspace = 10; //nav变化距离
var wraptemp = wrapminh; //nav现时高度
var wrapslideup = false; //false:下； true：上；
var wrapLock = false; //
var wrapmovieobj = ''; //主层动画
var wrapopacity = ''; //主层透明度
$('#navwrap').css('opacity','0.4');
$('#navwrap dl dd span').css('opacity','0');
$('#navwrap dl dd a').css('opacity','1');
wrapmouse();
ddmouse();
function ddmouse(){
$('#navwrap dd').hover(function(){
ddnum = $('#navwrap dd').index(this);
ddoutLock = false;
ddLock = false;
ddlidemovie()
},function(){
ddoutLock = true;
ddLock = false;
ddlidemovie()
});
}
var ddmovieobj = '';
var ddLock = false;
var ddoutLock = false;
var ddnum = '';
function ddslide(){
var total = $('#navwrap dd').length;
for(i=0;i<total;i++){
var ddopacity = $('#navwrap dd:eq('+i+') span').css('opacity');
ddopacity = Number(ddopacity.replace(/[^\- \. 0-9]+/g, ''));
if(ddoutLock){
if(ddopacity > 0){
$('#navwrap dd:eq('+i+') span').css('opacity',Number((ddopacity*10 - 1)/10));}
if(ddnum == i && ddopacity <= 0){
//$('#test').append('第'+i+'个:'+ddopacity+ddLock+' ');
ddLock = true;}
}else{
if(i != ddnum){
if(ddopacity > 0){
$('#navwrap dd:eq('+i+') span').css('opacity',Number((ddopacity*10 - 1)/10));}
}else{
if(ddopacity < 0.9){
$('#navwrap dd:eq('+i+') span').css('opacity',Number((ddopacity*10 + 1)/10));}else{
ddLock = true;
}
}
}
}
}
function ddlidemovie(){
clearInterval(ddmovieobj);
if(ddLock)return;
ddslide();
ddmovieobj = setInterval('ddlidemovie();',10);
}
//wrap鼠标经过
function wrapmouse(){
$('#navwrap').hover(function(){
wrapslideup = true;
wrapLock = false;
wrapslidemovie();
}, function(){
wrapslideup = false;
wrapLock = false;
wrapslidemovie();
});
}
// wrap动
function wrapslidemovie(){
clearInterval(wrapmovieobj);
if(wrapLock)return;
if(wraptemp >= wrapminh && wraptemp <= wrapmaxh){
wrapslide();
wrapmovieobj = setInterval('wrapslidemovie();',wraptime);
}
if(wraptemp < wrapminh){
wraptemp = wrapminh + wrapspace;
wrapslide();
wrapLock = true;}
if(wraptemp > wrapmaxh){
wraptemp = wrapmaxh - wrapspace;
wrapslide();
wrapLock = true;}
}
//主层动画
function wrapslide(){
if(wrapslideup){
wraptemp += wrapspace;
if(wrapopacity < 0.8){
wrapopacity = Number(wrapopacity + 0.1);
}
}else{
wraptemp -= wrapspace;
if(wrapopacity > 0.4){
wrapopacity = Number(wrapopacity - 0.1);
}
}
if(wraptemp == wrapmaxh){
$('#navwrap dl dd').css('display','block');
subnavup = true;
subnavLock = false;
subnavmovie();
}else{
subnavup = false;
subnavLock = false;
subnavmovie();
$('#navwrap dl dd').css('display','none');
}
//$('#test').append(wrapopacity+' ');
$('#navwrap').css('opacity',wrapopacity);
$('#navwrap').css('height',wraptemp);
}
function subnavmovie(){
clearInterval(subnavmovieobj);
if(subnavLock)return;
if(subnavtemp >= -10 && subnavtemp <= 0){
subnavslide();
subnavmovieobj = setInterval('subnavmovie();',wraptime);
}
}
//子导航动画
var subnavup = false;
var subnavtemp = -10;
var subnavmovieobj = '';
var subnavLock = false;
function subnavslide(){
if(subnavup){
if(subnavtemp < 0){
subnavtemp = Number(subnavtemp + 1); }
//alert('here');
}else{
if(subnavtemp > -10){
subnavtemp = Number(subnavtemp - 1); }
}
if(subnavtemp == -10 || subnavtemp ==0){subnavLock = true;}
//$('#test').append(subnavtemp+' ');
$('#navwrap dl dd').css('margin-left',subnavtemp);
}
</script>
</body>
</html>