js頂部可以伸縮的導航選單效果
本章節分享一段程式碼例項,它實現了頂部可以伸縮的導航選單效果。
本來程式碼裡面有圖片之類的,但是為了簡便都省略了,所以測試的時候注意一下。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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[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=""></a> <a href="#" title=""></a> </div> <div id="btn_offOn"><a href="#" title=""></a></div> </div> </body> </html>
相關文章
- 滑鼠懸浮可以上下伸縮的導航選單
- js滑鼠懸浮水平彈性伸縮的導航選單JS
- CSS 可伸縮圓角導航選單CSS
- 固定在頂部的導航選單
- 可以固定的頂部的導航選單簡單例項程式碼單例
- 垂直可伸縮的導航選單例項程式碼單例
- 水平伸縮動畫導航選單實現詳解動畫
- 多功能PC端頂部導航選單
- 可以應用於移動端的頂部導航固定效果
- css3實現的可伸縮圓角導航選單CSSS3
- 網頁頂部導航選單程式碼例項網頁
- TesterHome 首頁頂部的導航箭頭點選沒什麼效果
- js實現的響應式導航選單效果JS
- flutter 自定義tab導航-頂部導航-底部導航Flutter
- CSS多級導航選單效果CSS
- EXTjs 伸縮選單佈局accordion 和嚮導佈局cardlayoutJS
- 具有響應式效果的導航選單
- 具有彈性效果的右鍵導航選單
- 懸浮在網頁頂部可伸縮層詳解網頁
- Qt實現遮罩效果並可以拖動伸縮QT遮罩
- CSS3橫向導航選單效果CSSS3
- JavaScript橫向二級導航選單效果JavaScript
- jQuery 緩衝效果二級導航下拉選單jQuery
- css3水平滑動導航選單效果CSSS3
- 側欄懸浮導航選單拖動滾動條可以自動定位效果
- 一側具有滑鼠跟隨效果的垂直導航選單
- javascript底部具有跟隨效果的橫向導航選單JavaScript
- css實現立體效果橫向導航選單CSS
- 滑鼠懸浮具有背景動畫跟隨效果的導航選單動畫
- 拖動滾動條一定距離可以固定於頂部的導航欄
- jQuery 動畫方式展開或者收縮垂直導航選單jQuery動畫
- 導航選單(動畫)--- jQuery動畫jQuery
- CSS垂直導航選單CSS
- jQuery手風琴風格收縮展開導航選單jQuery
- css3滑鼠懸浮展開收縮導航選單CSSS3
- 導航和選單的教程一
- 手風琴方式展開和摺疊導航選單效果
- js垂直右側展開導航選單詳解JS