js实现顶部可折叠的菜单工具栏效果实例
本文实例讲述了js实现顶部可折叠的菜单工具栏效果。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>可以折叠的菜单工具栏</title>
<style>
html,body{
margin:0;
}
body{
url(img.jpg)repeat-x;
}
ha{
margin:0auto;
}
img{
border:none;
}
#fx_topToolbar{
position:relative;top:-76px;left:0;
margin:0auto;height:92px;
background:#0C3E74;width:700px;
text-align:center;
}
#fx_topToolbar.shell{
margin:0auto;padding:13px0;
}
#btn_offOn{
position:absolute;bottom:-8px;
left:20px;height:24px;width:150px;
background:url(img34.gif)no-repeat;
}
#btn_offOna{
display:block;zoom:1;height:24px;
position:relative;right:-16px;
background:url(tip.gif)no-repeat100%0;
}
</style>
<script>
(JS={
$:function(o){returntypeofo=="string"?document.getElementById(o):o},
on:function(o,type,fn){
o.attachEvent?o.attachEvent('on'+type,function(){fn.call(o)}):o.addEventListener(type,fn,false);
returnJS.on},
move:function(who,attr,val,s,fn){
varfm=parseInt(who.style[attr])||0;
clearInterval(who['timer_'+attr]);
variFx=(function(form,to,s){
returnfunction(){
returnform+=Math[form<to?'ceil':'floor']((to-form)*(s||0.3))};
})(fm,val,s);
who['timer_'+attr]=setInterval(function(){
varv=iFx();
who.style[attr]=v+'px';
if(v==val){fn&&fn.call(who);clearInterval(who['timer_'+attr]);};
},18);
}
}).on(window,'load',function(){
varQ=JS.$('fx_topToolbar');Q.style.top='-74px';
JS.on(JS.$('btn_offOn'),'mouseover',function(){JS.move(Q,'top',0)})
(Q,'mouseout',function(){Q.outTimer=setTimeout(function(){JS.move(Q,'top',-74)},10)})
(Q,'mouseover',function(){clearTimeout(this.outTimer)});
})
</script>
</head>
<body>
<divid="fx_topToolbar">
<divclass="shell">
<ahref="#"title="">
<imgsrc="1.gif"width="231"height="58"alt=""/>
</a>
<ahref="#"title="">
<imgsrc="2.gif"width="231"height="58"alt=""/>
</a>
</div>
<divid="btn_offOn"><ahref="#"title=""></a></div>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。