javascript制作的滑动图片菜单
方法很简单，特效非常棒，这里就先不多废话了，直接上代码
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-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}
.smli{float:left;display:inline;overflow:hidden}
</style>
<scripttype="text/javascript">
varslideMenu=function(){
varsp,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));vari=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){
varcw=parseInt(s.style.width,'10');
if(cw<st){
varowt=0;vari=0;
for(i;i<l;i++){
if(sa[i]!=s){
varo,ow;varoi=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>
<bodyonload="slideMenu.build('sm',200,10,10,1)">
<ulid="sm"class="sm">
<li><imgsrc="1.gif"alt=""/></li>
<li><imgsrc="2.gif"alt=""/></li>
<li><imgsrc="3.gif"alt=""/></li>
<li><imgsrc="4.gif"alt=""/></li>
</ul>
</body>
</html>
再来一个网友实现的滑动菜单特效
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>js十分好看的滑动菜单效果。</title>
<styletype="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:2pxsolid#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:1pxsolid#C7BC98;
border-right:1pxsolid#C7BC98;
}
.www_zzjs_net.b1{
margin:04px;
background:#C7BC98;
}
.www_zzjs_net.b2{
margin:02px;
border-width:02px;
}
.www_zzjs_net.b3{
margin:01px;
}
.www_zzjs_net.b4{
height:2px;
margin:0;
}
.www_zzjs_net.c1{
margin:05px;
background:#C7BC98;
}
.www_zzjs_net.c2{
margin:03px;
border-width:02px;
}
.www_zzjs_net.c3{
margin:02px;
}
.www_zzjs_net.c4{
height:2px;
margin:01px;
}
.www_zzjs_net.zzjs_net{
display:block;
background:transparent;
border-left:1pxsolid#C7BC98;
border-right:1pxsolid#C7BC98;
font-size:0.9em;
text-align:justify;
}
</style>
</head>
<body>
<divclass="www_zzjs_net">
<bclass="b1c1"></b>
<bclass="b2c2"></b>
<bclass="b3c3"></b>
<bclass="b4c4"></b>
<divclass="zzjs_net">
<divid="DoorP">
<table>
<tr>
<tdalign="center">
一号菜单
</td>
</tr>
</table>
<divclass="zzjs__net"align="center">
<ahref="#">一号分类</a><br/>二号分类<br/>三号分类<br/>
</div>
<bclass="b1"></b>
<bclass="b2"></b>
<bclass="b3"></b>
<bclass="b4"></b>
<table>
<tr>
<tdalign="center">
二号菜单
</td>
</tr>
</table>
<divclass="zzjs__net"align="center">
<ahref="#">四号分类</a><br/>五号分类<br/>六号分类<br/>
</div>
<bclass="b1"></b>
<bclass="b2"></b>
<bclass="b3"></b>
<bclass="b4"></b>
<table>
<tr>
<tdalign="center">
三号菜单
</td>
</tr>
</table>
<divclass="zzjs__net"align="center">
<ahref="#">七号分类</a><br/>八号分类<br/>九号分类<br/>
</div>
</div></div>
<bclass="b4c4"></b>
<bclass="b3c3"></b>
<bclass="b2c2"></b>
<bclass="b1c1"></b>
<scripttype="text/javascript">
varopen=2;
varopenState=newArray();
varcloseState=newArray();
vardH=220;
function$(id){
if(document.getElementById(id))
{
returndocument.getElementById(id);
}
else
{
alert("没有找到!");
}
}
function$tag(id,tagName){
return$(id).getElementsByTagName(tagName)
}
functioncloseMe(Cid,Oid){
varh=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]);
returnfalse;
}
closeState[Cid]=setTimeout("closeMe("+Cid+","+Oid+")");
}
functionopenMe(Oid){
varh=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]);
returnfalse;
}
openState[Oid]=setTimeout("openMe("+Oid+")");
}
varDs=$tag("DoorP","div");
varTs=$tag("DoorP","table");
if(Ds.length!=Ts.length)
{
alert("标题和内容数目不相同!");
}
for(vari=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)
{
returnfalse;
}
Ts[open].className="title02";
Ts[this.value].className="title01";
for(vari=0;i<openState.length;i++)
{
clearTimeout(openState[i]);
clearTimeout(closeState[i]);
}
closeMe(open,this.value);
//openMe(this.value);
open=this.value;
}
}
functionshowDiv(id){
Ds[id].style.height=dH+"px";
Ds[open].style.height="0px";
open=id;
}
</script>
</body>
</html>
以上所述就是本文的全部内容了，希望大家能够喜欢。