利用jQuery打造flash特效导航菜单

来源：广州中睿信息技术有限公司

发布时间：2012/10/21 23:25:16 编辑：admin 阅读 2532 次

flash效果在以前可谓大行其道，现在看来依然非常的炫目，随着web技术的发展，我们现在可以使用Javascript开发出类似绚丽的应用，小编收集了几个几个比较好看实用的JS仿flash效果的导航菜单。

1、适用企业站的仿flash效果

<!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" /> <标题>nav</标题> <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>

2、仿www.oussay.com的flash导航效果

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery仿http://www.oussay.com/的flash导航</title> </head> <style> *{ margin:0; padding:0;} .con{ height:40px; width:100%; overflow:hidden; position:relative; background:#9fc;} .nav_u{ height:26px; font:22px/26px "宋体"; font-style:italic; font-weight:bold; color:#333; position:relative;} .nav_d{ height:14px; font:12px/12px "宋体"; color:#333; position:relative;} .pos{position:relative; left:200px;} .con a{ text-decoration:none; display:block; color:#666} .nav_ub{ width:100%; height:26px; position:absolute; top:0px; background:#fff;} .nav_db{ width:100%; height:14px; position:absolute; bottom:0px; background:#fff;} </style> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script> $(document).ready(function(){ $(".con").prepend('<div class="nav_ub"></div><div class="nav_db"></div>') $(".con").hover(function(){ $(this).children(".nav_ub").stop().animate({top:-26},300); $(this).find(".pos").stop().animate({left:220},250); $(this).children(".nav_db").stop().animate({bottom:-14},300); $(this).find(".pos").stop().animate({left:220},250); },function(){ $(this).children(".nav_ub").stop().animate({top:0},300); $(this).find(".pos").stop().animate({left:200},250); $(this).children(".nav_db").stop().animate({bottom:0},300); $(this).find(".pos").stop().animate({left:200},250); }); }) </script> <body> <div class="con"> <div class="nav_u"><a class="pos" href="#">AAAAA</a></div> <div class="nav_d"><a class="pos" href="#">aaaaa</a></div> </div> <div class="con"> <div class="nav_u"><a class="pos" href="#">BBBBB</a></div> <div class="nav_d"><a class="pos" href="#">bbbbb</a></div> </div> <div class="con"> <div class="nav_u"><a class="pos" href="#">CCCCC</a></div> <div class="nav_d"><a class="pos" href="#">ccccc</a></div> </div> <div class="con"> <div class="nav_u"><a class="pos" href="#">AABBCC</a></div> <div class="nav_d"><a class="pos" href="#">aabbcc</a></div> </div> <p><br /> 供稿：<a href="mailto:wusong__1986@163.com">SD_night</a>　首发：<a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a></p> <p><br /> jquery仿www.oussay.com的flash导航<br /> <br /> </p> <p>注意：由于jquery文件是外部调用，比较慢，如预览有问题，请刷新页面或保存代码到本地查看。 <br /> <br /> </p> <p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p> </body> </html>

3、动态平滑

<html> <head> <title>www.lanrentuku.com</title> <style type="text/css"> body {cursor:crosshair; background:#111; margin:0; padding:0; position:absolute; overflow:hidden; left:0; top:0; width:100%; height:100%;} .link {position:absolute;left:0;width:100%;height:0;background:#000;overflow:hidden;visibility:hidden;} .title {position:relative;cursor:pointer;background:#333;width:100%;color:#fff;font-family:verdana;font-size:11px;left:2;height:15;overflow:hidden;} .title_o {position:relative;cursor:pointer;background:#fff;width:100%;color:#000;font-family:verdana;font-size:11px;left:2;height:15;overflow:hidden;} .text {position:relative;text-align:justify;margin:10px;font-family:verdana;font-size:11px;color:#FFF;overflow:hidden;height:90%} </style> <script type="text/javascript"> </script></head><body> <div style="position: absolute; left: 50%; top: 50%;"> <div id="frames" style="overflow: hidden; position: absolute; width: 200px; height: 340px; left: -100px; top: -170px;"> <span style="top: 0pt; height: 211px; visibility: visible;" class="link"><div class="title_o"></div> <div style="margin: 20px; overflow: hidden; position: relative; text-align: center; font-family: verdana; font-size: 32px; font-weight: bold; color: rgb(255, 255, 255); height: 90%; visibility: visible;"> The Circle of Life </div> </span> <span style="top: 213px; height: 211px; visibility: visible;" class="link"><div class="title">Programmer to Module Leader:</div> <div style="visibility: hidden;" class="text"> "This is not possible. **Impossible**. It will involve design change and no body in our team knows the design of the system. And above that nobody in our company knows the language in which this software has been written. So even if somebody wants to work on it, they can't. If you ask my personal opinion the company should never take these type of projects." </div> </span> <span style="top: 231px; height: 211px; visibility: visible;" class="link"><div class="title">Module Leader to Project Manager:</div> <div style="visibility: hidden;" class="text"> "This project will involve design change. Currently we don't have people who have experience in this type of work. Also the language is unknown so we will have to arrange for some training if we take this project. In my personal opinion, we should avoid taking this project." </div> </span> <span style="top: 249px; height: 211px; visibility: visible;" class="link"><div class="title">Project Manager to 1st Level Manager:</div> <div style="visibility: hidden;" class="text"> "This project involves design change in the system and we don't have much experience in that area. Also not many people are trained in this area. In my personal opinion we can take the project but we should ask for some more time." </div> </span> <span style="top: 267px; height: 211px; visibility: visible;" class="link"><div class="title">1st Level Manager to 2nd Level Manager:</div> <div style="visibility: hidden;" class="text"> "This project involves design re-engineering. We have some people who have worked in this area and some who know the language. So they can train other people. In my personal opinion we should take this project but with caution." </div> </span> <span style="top: 285px; height: 211px; visibility: visible;" class="link"><div class="title">2nd Level Manager to CEO:</div> <div style="visibility: hidden;" class="text"> "This project will show the industry our capabilities in remodeling the design of a complete system. We have all the necessary skills and people to execute this project successfully. Some people have already given in-house training in this area to other people. In my personal opinion we should not let this project go by under any circumstance." </div> </span> <span style="top: 303px; height: 211px; visibility: visible;" class="link"><div class="title">CEO to Client:</div> <div style="visibility: hidden;" class="text"> "These are the type of projects in which our company specialize. We have executed many project of the same nature for many big clients. Trust me when I say that you are in the safest hand in the Industry. In my personal opinion we can execute this project successfully and that too well with in the given time frame." </div> </span> <span style="top: 321px; height: 211px; visibility: visible;" class="link"><div class="title"></div> <div style="margin: 20px; overflow: hidden; position: relative; text-align: center; font-family: verdana; font-size: 32px; font-weight: bold; color: rgb(255, 255, 255); height: 90%; visibility: hidden;"> The End </div> </span> </div> </div> <p>查找更多代码，请访问：<a href="http://www.lanrentuku.com" target="_blank">懒人图库</a></p> </body></html>