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

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 菜单导航 -> jQuery实现的向上弹出的仿flash效果的导航菜单

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

作者:admin 发布时间:2010-12-6 9:33:32 发布人: admin

<!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(/web/20150918012649im_/http://myjs.jz123.cn/js/caidan/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://web.archive.org/web/20150918012649js_/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效果的导航菜单

将本文收藏到QQ书签与更多好友分享

上一篇：文章：一个鼠标悬停时会变色的按钮下一篇：文章：适合做网站后台菜单的JS伸缩菜单

网页特效

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

本类浏览排行 »

本站推荐文章 »