javascript实现的又一个不错的滑动导航效果

更新时间：2007年04月21日 00:00:00 作者：

导航,鼠标放上去看看效果

<html> <head> <title>::你会做，我也要会::</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="JavaScript">  function MM_findObj(n, d) { //v4.01   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);   if(!x && d.getElementById) x=d.getElementById(n); return x; } function P7AniMagic(el, x, y, a, b, c, s) { //v2.5 PVII  var g,elo=el,f="",m=false,d="";x=parseInt(x);y=parseInt(y);  var t = 'g.p7Magic = setTimeout("P7AniMagic(\''+elo+'\',';   if ((g=MM_findObj(el))!=null) {d=(document.layers)?g:g.style;}else{return;}  if (parseInt(s)>0) {eval(t+x+','+y+','+a+','+b+','+c+',0)",' + s+')');return;}  var xx=(parseInt(d.left))?parseInt(d.left):0;  var yy=(parseInt(d.top))?parseInt(d.top):0;  if(parseInt(c)==1) {x+=xx;y+=yy;m=true;c=0;}  else if (c==2) {m=false;clearTimeout(g.p7Magic);}  else {var i=parseInt(a);   if (eval(g.moved)){clearTimeout(g.p7Magic);}   if (xx<x){xx+=i;m=true;if(xx>x){xx=x;}}   if (xx>x){xx-=i;m=true;if(xx<x){xx=x;}}   if (yy<y){yy+=i;m=true;if(yy>y){yy=y;}}   if (yy>y){yy-=i;m=true;if(yy<y){yy=y;}}}  if (m) {if((navigator.appName=="Netscape") && parseInt(navigator.appVersion)>4){     xx+="px";yy+="px";}   d.left=xx;d.top=yy;g.moved=true;eval(t+x+','+y+','+a+','+b+','+c+',0)",'+b+')');   }else {g.moved=false;} } //--> </script> <style type="text/css">  </style> </head> <body bgcolor="#FFFFFF" text="#000000"> <div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1">   <div id="Layer2" style="position:absolute; left:264px; top:59px; width:67px; height:52px; z-index:2; background-color: #0068FF; layer-background-color: #0068FF; border: 1px none #000000; visibility: visible" class="t">      <table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">       <tr>          <td align="center" valign="top"><font color="#FFFFFF" onMouseOver="P7AniMagic('Layer2',210,35,5,30,0,0)" onMouseOut="P7AniMagic('Layer2',264,59,5,30,0,0)">on            1           <a href="#;">第一项</a>           <a href="#;">第二项</a>           <a href="#;">第三项</a>           </font></td>       </tr>     </table>   </div>   <div id="Layer3" style="position:absolute; left:264px; top:81px; width:66px; height:84px; z-index:3; background-color: #0066FF; layer-background-color: #0066FF; border: 1px none #000000; visibility: visible" class="t">      <table width="100%" border="0" cellspacing="0" cellpadding="0">       <tr>          <td>           <div align="center"><font color="#FFFFFF" onMouseOver="P7AniMagic('Layer3',210,55,5,30,0,0)" onMouseOut="P7AniMagic('Layer3',264,81,5,30,0,0)">on 2             <a href="#;">第一项</a>             <a href="#;">第二项</a>             <a href="#;">第三项</a>             </font></div>         </td>       </tr>     </table>   </div>   <div id="Layer4" style="position:absolute; width:68px; height:80px; z-index:4; left: 264px; top: 102px; background-color: #0064FF; layer-background-color: #0064FF; border: 1px none #000000; visibility: visible" class="t">      <table width="100%" border="0" cellspacing="0" cellpadding="0">       <tr>          <td>           <div align="center"><font color="#FFFFFF" onMouseOver="P7AniMagic('Layer4',210,75,5,30,0,0)" onMouseOut="P7AniMagic('Layer4',264,102,5,30,0,0)">on 3             <a href="#;">第一项</a>             <a href="#;">第二项</a>             <a href="#;">第三项</a>             </font></div>         </td>       </tr>     </table>   </div>  <div id="Layer5" style="position:absolute; width:65px; height:127px; z-index:5; left: 265px; top: 56px">      <table width="100%" border="0" cellspacing="0" cellpadding="0" height="72">       <tr>          <td height="24" onMouseOver="P7AniMagic('Layer2',210,35,5,30,0,0)" onMouseOut="P7AniMagic('Layer2',264,59,5,30,0,0)">&nbsp;&nbsp;&nbsp;&nbsp;</td>       </tr>       <tr>         <td height="24" onMouseOver="P7AniMagic('Layer3',210,55,5,30,0,0)" onMouseOut="P7AniMagic('Layer3',264,81,5,30,0,0)">&nbsp;&nbsp;&nbsp;&nbsp;</td>       </tr>       <tr>         <td height="24" onMouseOver="P7AniMagic('Layer4',210,75,5,30,0,0)" onMouseOut="P7AniMagic('Layer4',264,102,5,30,0,0)">&nbsp;&nbsp;&nbsp;&nbsp;</td>       </tr>     </table>   </div> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

javascript实现的又一个不错的滑动导航效果

Div+Js实现的带阴影菜单微软以前网站曾用过
Div+Js实现的阴影菜单，微软以前老版网站首页曾用过，用以索引出Windows产品家族的所有产品，本菜单仅实现了一个雏形，想实现像微软一样的效果，估计还需要做不少工作。放出来的目的是供学习CSS的朋友做参考。
2009-12-12
三级下拉菜单的js实现代码
纯js实现的三级下拉菜单效果的代码，需要的朋友可以参考下。
2011-05-05
带缓冲的收缩与展开内容效果
带缓冲的收缩与展开内容效果...
2007-09-09
代码经过精简后的仿QQ折叠菜单代码
代码经过精简后的仿QQ折叠菜单，以前发过的，不过这个是经过几轮代码精简后的一个版本，而且在各浏览器下的表现也很不错，兼容性没出问题。
2010-09-09
自己做一款不错的二级导航菜单
自己做一款不错的二级导航菜单，黑色风格，是根据仿淘宝支付宝菜单而做的，自我感觉还算行吧。
2010-11-11
原生JS仿苹果任务栏菜单，放大效果的菜单
原生JS仿苹果任务栏菜单，具备图标放大效果的菜单，原生JavaScript自定的特效，鼠标放到菜单上就把图标放大了，类似使用了jQuery的效果，里面用到了几张菜单图片，这个那就自己下载吧。
2011-08-08
鼠标触发移动的分层菜单层菜单moveMenu
会移动的菜单，层菜单，鼠标放在菜单上，菜单就会移动，上浮的菜单，像是TAB风格的菜单，使用了一张图片，顺着代码可下载到这张修饰的小图片,需要的朋友可以参考下
2012-12-12
一个很简单的无限分类树实现代码
一个很简单的无限分类树实现代码，需要的朋友可以参考下。
2010-11-11
jquery 导航设计实现代码学习jquery的朋友可以看下
jquery 导航设计，主要是通过jquery控制一些css样式变换。
2009-09-09
CSS实现同一背景图的导航菜单
通过CSS来实现这个效果，背景图只有一张，但是鼠标经过各导航菜单选项时，却看到不同的背景图。
2010-07-07