仿flash导航菜单(jquery)，适合企业站

当前位置：网页特效 > 网页特效演示页

菜单导航特效日期时间特效背景图像特效图层样式特效鼠标特效代码页面窗口特效色彩表格特效文字特效代码表单按钮特效计数转换特效游戏网页特效实例网页特效

仿flash导航菜单(jquery)，适合企业站 - 网页特效代码演示 - 特效代码运行

以下是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=utf-8" />
<title>nav</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>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

[提示：可先修改代码再按运行]

当前位置：网页特效 > 网页特效演示页

仿flash导航菜单(jquery)，适合企业站 - 网页特效代码演示 - 特效代码运行

刚被其它网友点击的网页特效

搜索查询面板

本月特效排行

本周特效排行

本日特效排行