js顶部可以伸缩的导航菜单效果
分类:实例代码
本章节分享一段代码实例,它实现了顶部可以伸缩的导航菜单效果。
本来代码里面有图片之类的,但是为了简便都省略了,所以测试的时候注意一下。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> html,body{ margin:0; } ha{ margin:0 auto; } #fx_topToolbar{ position:relative; op:-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; } #btn_offOn a{ display:block; zoom:1; height:24px; position:relative; right:-16px; } </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)||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=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=""></a> <a href="#" title=""></a> </div> <div id="btn_offOn"><a href="#" title=""></a></div> </div> </body> </html>