首頁 > 開發者 > JavaScript

js實現頂部可摺疊的菜單工具列效果執行個體，js可摺疊

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

js實現頂部可摺疊的菜單工具列效果執行個體，js可摺疊

本文執行個體講述了js實現頂部可摺疊的菜單工具列效果。分享給大家供大家參考。具體實現方法如下：

<!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>

希望本文所述對大家的javascript程式設計有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More