1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"><head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 4 <title>可以折叠的菜单工具栏</title> 5 <style> 6 html,body{margin:0;} 7 body{ url(/jscss/demoimg/200908/img.jpg) repeat-x; } 8 ha{margin:0 auto;} 9 img{border:none;} 10 #fx_topToolbar{position:relative;top:-76px;left:0;margin:0 auto;height:92px;background:#0C3E74; width:700px;text-align:center;} 11 #fx_topToolbar .shell{ margin:0 auto;padding:13px 0;} 12 #btn_offOn{position:absolute;bottom:-8px;left:20px;height:24px; width:150px;background:url(img34.gif) no-repeat;} 13 #btn_offOn a{display:block;zoom:1;height:24px;position:relative;right:-16px;background:url(tip.gif) no-repeat 100% 0;} 14 </style> 15 <script> 16 (JS={ 17 $:function(o){return typeof o=="string"?document.getElementById(o):o}, 18 on:function(o,type,fn){o.attachEvent?o.attachEvent('on'+type,function(){fn.call(o)}):o.addEventListener(type,fn,false);return JS.on}, 19 move:function(who,attr,val,s,fn){ 20 var fm=parseInt(who.style[attr])||0; 21 clearInterval(who['timer_'+attr]); 22 var iFx=(function(form,to,s){ 23 return function (){return form+=Math[form<to?'ceil':'floor']((to-form)*(s||0.3))}; 24 })(fm,val,s); 25 who['timer_'+attr]=setInterval(function (){ 26 var v=iFx(); 27 who.style[attr]=v+'px'; 28 if(v==val){ fn&&fn.call(who);clearInterval(who['timer_'+attr]);}; 29 },18); 30 } 31 }).on(window,'load',function (){ 32 var Q=JS.$('fx_topToolbar');Q.style.top='-74px'; 33 JS.on(JS.$('btn_offOn'),'mouseover',function(){JS.move(Q,'top',0)}) 34 (Q,'mouseout',function (){Q.outTimer=setTimeout(function(){JS.move(Q,'top',-74)},10)}) 35 (Q,'mouseover',function (){clearTimeout(this.outTimer)}); 36 }) 37 </script> 38 </head> 39 <body> 40 <div style="top: -74px;" id="fx_topToolbar"> 41 <div class="shell"> 42 <a href="#" title=""><img src="1.gif" alt="" height="58" width="231"></a> 43 <a href="#" title=""><img src="2.gif" alt="" height="58" width="231"></a> 44 </div> 45 <div id="btn_offOn"><a href="#" title=""></a></div> 46 </div> 47 48 </body></html>
简化下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"><head> 3 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 4 <title>可以折叠的菜单工具栏</title> 5 <style> 6 html,body{margin:0;} 7 body{ url(/jscss/demoimg/200908/img.jpg) repeat-x; } 8 ha{margin:0 auto;} 9 img{border:none;} 10 #fx_topToolbar{position:relative;top:-76px;left:0;margin:0 auto;height:92px;background:#0C3E74; width:700px;text-align:center;} 11 #fx_topToolbar .shell{ margin:0 auto;padding:13px 0;} 12 #btn_offOn{position:absolute;bottom:-8px;left:20px;height:24px; width:150px;background:url(img34.gif) no-repeat;} 13 #btn_offOn a{display:block;zoom:1;height:24px;position:relative;right:-16px;background:url(tip.gif) no-repeat 100% 0;} 14 </style> 15 <script> 16 var JS={ 17 $:function(o){return typeof o=="string"?document.getElementById(o):o}, 18 on:function(o,type,fn){o.attachEvent?o.attachEvent('on'+type,function(){fn.call(o)}):o.addEventListener(type,fn,false);return JS.on}, 19 move:function(who,attr,val,s){ 20 var fm=parseInt(who.style[attr])||0; 21 clearInterval(who['timer_'+attr]); 22 who['timer_'+attr]=setInterval(function (){ 23 fm+=Math[fm<val?'ceil':'floor']((val-fm)*(s||0.3)); 24 who.style[attr]=fm+'px'; 25 if(fm==val){ clearInterval(who['timer_'+attr]);}; 26 },18); 27 } 28 } 29 JS.on(window,'load',function (){ 30 var Q=JS.$('fx_topToolbar');Q.style.top='-74px'; 31 32 JS.on(JS.$('btn_offOn'),'mouseover',function(){JS.move(Q,'top',0,0.1)}) 33 (Q,'mouseout',function (){Q.outTimer=setTimeout(function(){JS.move(Q,'top',-74)},10)}) 34 (Q,'mouseover',function (){clearTimeout(this.outTimer)}); 35 }) 36 37 </script> 38 </head> 39 <body> 40 <div style="top: -74px;" id="fx_topToolbar"> 41 <div class="shell"> 42 <a href="#" title=""><img src="1.gif" alt="" height="58" width="231"></a> 43 <a href="#" title=""><img src="2.gif" alt="" height="58" width="231"></a> 44 </div> 45 <div id="btn_offOn"><a href="#" title=""></a></div> 46 </div> 47 48 </body></html>
面向对象：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 7 8 <style> 9 html,body{margin:0;} 10 body{ url(/jscss/demoimg/200908/img.jpg) repeat-x; } 11 ha{margin:0 auto;} 12 img{border:none;} 13 #fx_topToolbar{position:relative;top:-76px;left:0;margin:0 auto;height:92px;background:#0C3E74; width:700px;text-align:center;} 14 #fx_topToolbar .shell{ margin:0 auto;padding:13px 0;} 15 #btn_offOn{position:absolute;bottom:-8px;left:20px;height:24px; width:150px;background:url(img34.gif) no-repeat;} 16 #btn_offOn a{display:block;zoom:1;height:24px;position:relative;right:-16px;background:url(tip.gif) no-repeat 100% 0;} 17 </style> 18 19 <script type="text/javascript"> 20 function daohanglan (id,attr){ 21 22 var $this=this; 23 this.cc=attr 24 this.Id=document.getElementById(id); 25 26 this.anniu=this.Id.getElementsByTagName("a"); 27 28 this.anniu1=this.anniu[2]; 29 30 this.Attr=parseInt(this.Id.style[attr]); 31 32 this.anniu1.onmouseover=function(){$this.fn1(0) }; 33 34 this.Id.onmouseout=function(){this["dingshi"]=setTimeout(function(){$this.fn1($this.Attr)},100) }; 35 this.Id.onmouseover=function(){ clearTimeout(this["dingshi"])}; 36 }; 37 38 daohanglan.prototype.fn1=function(val){ 39 40 var fm=parseInt(this.Id.style[this.cc]); 41 42 var this1=this; 43 44 clearInterval(this["ding"]); 45 46 this["ding"]=setInterval(function(){ 47 48 fm+=Math[fm<val?'ceil':'floor']((val-fm)*0.3); 49 50 this1.Id.style[this1.cc]=fm+"px"; 51 52 if(fm==val){ clearInterval(this["ding"]);}; 53 },10); 54 }; 55 56 57 window.onload=function(){ 58 59 new daohanglan("fx_topToolbar","top") 60 } 61 62 </script> 63 64 </head> 65 66 <body> 67 68 <div style="top:-74px;" id="fx_topToolbar"> 69 <div class="shell"> 70 <a href="#" title=""><img src="1.gif" alt="" height="58" width="231"></a> 71 <a href="#" title=""><img src="2.gif" alt="" height="58" width="231"></a> 72 </div> 73 <div id="btn_offOn"><a id="bb" href="#" title=""></a></div> 74 </div> 75 </body> 76 </html>