Home > Article > Web Front-end > js implementation of top collapsible menu toolbar effect example_javascript skills
The example in this article describes the js implementation of the top collapsible menu toolbar effect. Share it with everyone for your reference. The specific implementation method is as follows:
<!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> <title>可以折叠的菜单工具栏</title> <style> html,body{ margin:0; } body{ url(img.jpg) repeat-x; } ha{ margin:0 auto; } img{ border:none; } #fx_topToolbar{ position:relative;top:-76px;left:0; margin:0 auto;height:92px; background:#0C3E74; width:700px; text-align:center; } #fx_topToolbar .shell{ margin:0 auto;padding:13px 0; } #btn_offOn{ position:absolute;bottom:-8px; left:20px;height:24px; width:150px; background:url(img34.gif) no-repeat; } #btn_offOn a{ display:block;zoom:1;height:24px; position:relative;right:-16px; background:url(tip.gif) no-repeat 100% 0; } </style> <script> (JS={ $:function(o){return typeof o=="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); return JS.on}, move:function(who,attr,val,s,fn){ var fm=parseInt(who.style[attr])||0; clearInterval(who['timer_'+attr]); var iFx=(function(form,to,s){ return function (){ return form+=Math[form<to?'ceil':'floor']((to-form)*(s||0.3))}; })(fm,val,s); who['timer_'+attr]=setInterval(function (){ var v=iFx(); who.style[attr]=v+'px'; if(v==val){ fn&&fn.call(who);clearInterval(who['timer_'+attr]);}; },18); } }).on(window,'load',function (){ var Q=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> <div id="fx_topToolbar"> <div class="shell"> <a href="#" title=""> <img src="1.gif" width="231" height="58" alt="" /> </a> <a href="#" title=""> <img src="2.gif" width="231" height="58" alt="" /> </a> </div> <div id="btn_offOn"><a href="#" title=""></a></div> </div> </body> </html>
I hope this article will be helpful to everyone’s JavaScript programming design.