方法很简单，特效非常棒，这里就先不多废话了，直接上代码
<!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=gb2312" /> <title>js滑动菜单</title> <style> * {margin:0; padding:0} .sm {list-style:none; width:459px; height:100px; display:block; overflow:hidden} .sm li {float:left; display:inline; overflow:hidden} </style> <script type="text/javascript"> var slideMenu=function(){ var sp,st,t,m,sa,l,w,sw,ot; return{ build:function(sm,sw,mt,s,sl,h){ sp=s; st=sw; t=mt; m=document.getElementById(sm); sa=m.getElementsByTagName('li'); l=sa.length; w=m.offsetWidth; sw=w/l; ot=Math.floor((w-st)/(l-1)); var i=0; for(i;i<l;i++){s=sa[i]; s.style.width=sw+'px'; this.timer(s)} if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)} }, timer:function(s){s.onmouseover=function(){clearInterval(m.timer);m.timer=setInterval(function() {slideMenu.slide(s)},t)}}, slide:function(s){ var cw=parseInt(s.style.width,'10'); if(cw<st){ var owt=0; var i=0; for(i;i<l;i++){ if(sa[i]!=s){ var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width,'10'); if(ow>ot){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi) +'px'} owt=owt+(ow-oi)}} s.style.width=(w-owt)+'px'; }else{clearInterval(m.timer)} } }; }(); </script> </head> <body> <ul> <li><img src="https://www.jb51.net/article/1.gif" alt="" /></li> <li><img src="https://www.jb51.net/article/2.gif" alt="" /></li> <li><img src="https://www.jb51.net/article/3.gif" alt="" /></li> <li><img src="https://www.jb51.net/article/4.gif" alt="" /></li> </ul> </body> </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=gb2312" /> <title>js十分好看的滑动菜单效果。</title> <style type="text/css"> body{ margin:10px; padding:10px; } a:link { text-decoration: none;color: blue} a:active { text-decoration:blink} a:hover { text-decoration:underline;color: red} a:visited { text-decoration: none;color: green} body,td,div,span,li{ font-size:12px; } .title01,.title02{ color:#00b; font-weight:bold; } #DoorP{ width:200px; height:300px; padding:0px; background:#FFFCF2; overflow:hidden; } .title01{ width:100%; height:25px; background:#FFFCF2; cursor:pointer; } .title02{ width:100%; height:25px; background:#FFFCF2; cursor:pointer; } .zzjs__net{ background:#FFFCF2; border-bottom:2px solid #fff; overflow:hidden; color:#666; padding-left:4px; padding-right:4px; line-height:18px; } .www_zzjs_net { width:202px; } .www_zzjs_net .b1, .www_zzjs_net .b2, .www_zzjs_net .b3, .www_zzjs_net .b4 { font-size:1px; display:block; background:#FFFCF2; overflow: hidden; } .www_zzjs_net .b1, .www_zzjs_net .b2, .www_zzjs_net .b3 { height:1px; } .www_zzjs_net .b2, .www_zzjs_net .b3, .www_zzjs_net .b4 { background:#FFFCF2; border-left:1px solid #C7BC98; border-right:1px solid #C7BC98; } .www_zzjs_net .b1 { margin:0 4px; background:#C7BC98; } .www_zzjs_net .b2 { margin:0 2px; border-width:0 2px; } .www_zzjs_net .b3 { margin:0 1px; } .www_zzjs_net .b4 { height:2px; margin:0; } .www_zzjs_net .c1 { margin:0 5px; background:#C7BC98; } .www_zzjs_net .c2 { margin:0 3px; border-width:0 2px; } .www_zzjs_net .c3 { margin:0 2px; } .www_zzjs_net .c4 { height:2px; margin: 0 1px; } .www_zzjs_net .zzjs_net { display:block; background:transparent; border-left:1px solid #C7BC98; border-right:1px solid #C7BC98; font-size:0.9em; text-align:justify; } </style> </head> <body> <div> <b></b> <b></b> <b></b> <b></b> <div> <div> <table> <tr> <td> 一号菜单 </td> </tr> </table> <div> <a href="#">一号分类</a><br/>二号分类<br/>三号分类<br/> </div> <b></b> <b></b> <b></b> <b></b> <table> <tr> <td> 二号菜单 </td> </tr> </table> <div> <a href="#">四号分类</a><br/>五号分类<br/>六号分类<br/> </div> <b></b> <b></b> <b></b> <b></b> <table> <tr> <td> 三号菜单 </td> </tr> </table> <div> <a href="#">七号分类</a><br/>八号分类<br/>九号分类<br/> </div> </div></div> <b></b> <b></b> <b></b> <b></b> <script type="text/javascript"> var open = 2; var openState = new Array(); var closeState = new Array(); var dH = 220; function $(id){ if(document.getElementById(id)) { return document.getElementById(id); } else { alert("没有找到!"); } } function $tag(id,tagName){ return $(id).getElementsByTagName(tagName) } function closeMe(Cid,Oid){ var h = parseInt(Ds[Cid].style.height); //alert(h); if(h > 2) { h = h - Math.ceil(h/3); Ds[Cid].style.height = h+"px"; } else { openMe(Oid); clearTimeout(closeState[Cid]); return false; } closeState[Cid] = setTimeout("closeMe("+Cid+","+Oid+")"); } function openMe(Oid){ var h = parseInt(Ds[Oid].style.height); //alert(h); if(h < dH) { h = h + Math.ceil((dH-h)/3); Ds[Oid].style.height = h+"px"; } else { clearTimeout(openState[Oid]); return false; } openState[Oid] = setTimeout("openMe("+Oid+")"); } var Ds = $tag("DoorP","div"); var Ts = $tag("DoorP","table"); if(Ds.length != Ts.length) { alert("标题和内容数目不相同!"); } for(var i = 0 ; i < Ds.length ; i++) { if(i==open) { Ds[i].style.height = dH+"px"; Ts[i].className="title01"; } else { Ds[i].style.height = "0px"; Ts[i].className="title02"; } Ts[i].value = i; Ts[i].onmouseover = function(){ if(open==this.value) { return false; } Ts[open].className="title02"; Ts[this.value].className="title01"; for(var i = 0 ; i < openState.length ; i++) { clearTimeout(openState[i]); clearTimeout(closeState[i]); } closeMe(open,this.value); //openMe(this.value); open = this.value; } } function showDiv(id){ Ds[id].style.height=dH+"px"; Ds[open].style.height="0px"; open = id; } </script> </body> </html>