教程集 > 脚本编程 > javascript > 正文超酷仿FLASH导航菜单效果

超酷仿FLASH导航菜单效果

发布时间：2016-10-25 编辑：jiaochengji.com

教程集为您提供超酷仿FLASH导航菜单效果等资源，欢迎您收藏本站，我们将为您提供最新的超酷仿FLASH导航菜单效果资源

超酷仿FLASH导航菜单效果

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>仿FLASH导航菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> * { margin:0; padding:0; } body { background:#FC0; } 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> 预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以了；当然，在实际使用中，不会出现这样的问题。

导航1: <span></span>子导航1; <span></span>子导航2; <span></span>子导航3

导航2: <span></span>子导航1; <span></span>子导航2; <span></span>子导航3

导航3: <span></span>子导航1; <span></span>子导航2; <span></span>子导航3

导航4: <span></span>子导航1; <span></span>子导航2; <span></span>子导航3

<script type="text/javascript" src="http://www.zzsky.cn/effect/images/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></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
超酷仿FLASH导航菜单效果
 7款风格新颖的jQuery/CSS3菜单导航分享
 javascript 仿FLASH效果的竖向导航菜单
 jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
 FLASH效果的导航菜单
 模仿Flash AS效果的导航菜单
 模仿flash效果的跳动导航菜单代码
 超级酷和最实用的jQuery实例收集(20个)
优酷视频无法播放或打不开问题解决办法
 jQuery菜单插件 Smooth Navigational Menu

上一篇：js左边伸拉导航菜单下一篇：js 类似msn网站tab选项卡菜单

[关闭]

最近更新

浏览排行

~ ~