js實(shí)現(xiàn)頂部可折疊的菜單工具欄效果實(shí)例
本文實(shí)例講述了js實(shí)現(xiàn)頂部可折疊的菜單工具欄效果。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<!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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- Extjs學(xué)習(xí)筆記之四 工具欄和菜單
- JS實(shí)現(xiàn)自動(dòng)固定頂部的懸浮菜單欄效果
- 基于vue.js實(shí)現(xiàn)側(cè)邊菜單欄
- 使用ReactJS實(shí)現(xiàn)tab頁(yè)切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果
- 簡(jiǎn)單實(shí)現(xiàn)js菜單欄切換效果
- 原生JS仿蘋果任務(wù)欄菜單,放大效果的菜單
- JS實(shí)現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼
- JavaScript NodeTree導(dǎo)航欄(菜單項(xiàng)JSON類型/自制)
- 非常酷的js圖形漸隱導(dǎo)航菜單欄
- JS實(shí)現(xiàn)左側(cè)菜單工具欄
相關(guān)文章
淺析JavaScript中的同名標(biāo)識(shí)符優(yōu)先級(jí)
這篇文章主要介紹了JavaScript中的同名標(biāo)識(shí)符優(yōu)先級(jí)。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12JS實(shí)現(xiàn)網(wǎng)絡(luò)請(qǐng)求的三種方式梳理
本文主要為大家介紹了基于 XMLHttpRequest、Promise、async/await 等三種異步網(wǎng)絡(luò)請(qǐng)求的寫(xiě)法,文中的示例代碼講解詳細(xì),感興趣的可以學(xué)習(xí)一下2022-03-03JavaScript處理XML DOM、XPath和XSLT方法詳解
這篇文章介紹了JavaScript處理XML DOM、XPath和XSLT的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05bootstrap table分頁(yè)模板和獲取表中的ID方法
這篇文章主要介紹了bootstrap table分頁(yè)模板和獲取表中的ID方法,需要的朋友可以參考下2017-01-01Bootstrap基本插件學(xué)習(xí)筆記之按鈕(21)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之按鈕的相關(guān)資料,實(shí)現(xiàn)按鈕狀態(tài)控制等形式的交互,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12JavaScript實(shí)現(xiàn)帶箭頭標(biāo)識(shí)的多級(jí)下拉菜單效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)帶箭頭標(biāo)識(shí)的多級(jí)下拉菜單效果,可實(shí)現(xiàn)橫向與縱向箭頭的形式標(biāo)識(shí)選中菜單項(xiàng)位置的功能,涉及javascript針對(duì)頁(yè)面元素位置的判定與樣式動(dòng)態(tài)操作技巧,需要的朋友可以參考下2015-08-08小程序點(diǎn)餐界面添加購(gòu)物車左右擺動(dòng)動(dòng)畫(huà)
這篇文章主要介紹了小程序點(diǎn)餐界面添加購(gòu)物車左右擺動(dòng)動(dòng)畫(huà),當(dāng)用戶點(diǎn)擊添加到購(gòu)物車后會(huì)有一個(gè)左右擺動(dòng)的購(gòu)物車提示效果,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2020-09-09