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

最新推荐文章于 2022-05-19 15:35:29 发布

weixin_34113237

最新推荐文章于 2022-05-19 15:35:29 发布

阅读量156

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/hopeanCom/archive/2012/11/17/2774805.html

版权

   <!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>