jQuery实现的向上弹出的仿flash效果的导航菜单

hopeanCom · 发表于 2012-12-22 21:29:59

<div id="cnblogs_post_body"> <!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;
width:600px;
position:relative;
}
#navwrap {
width:600px;
height:50px;
background:#000;
position:absolute;
bottom:0;
left:0;
overflow:hidden;
}
#navwrap dl {
margin:10px;
_margin:10px 0;
width:120px;
color:#FFF;
float:left;
_width:140px;
_overflow:hidden;
}
#navwrap dl dt {
padding:0 10px;
height:26px;
line-height:26px;
width: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;
width:120px;
display:none;
position:relative;
}
#navwrap dl dd a {
font-size:12px;
position:absolute;
width:120px;
height:20px;
top:0;
}
#navwrap dl dd span {
margin-left:-5px;
width: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; width: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>

		自动登录	找回密码
密码			立即注册

jQuery实现的向上弹出的仿flash效果的导航菜单

浏览过的版块