快捷導(dǎo)航

js實(shí)現(xiàn)頂部可折疊的菜單工具欄效果實(shí)例

更新時(shí)間：2015年05月09日 10:02:41 作者：休閑生活文化

這篇文章主要介紹了js實(shí)現(xiàn)頂部可折疊的菜單工具欄效果,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)菜單工具欄出現(xiàn)折疊與展開(kāi)效果,涉及javascript鼠標(biāo)事件及樣式的操作技巧,需要的朋友可以參考下

本文實(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ì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

JavaScript詞法作用域與調(diào)用對(duì)象深入理解
關(guān)于 Javascript 的函數(shù)作用域、調(diào)用對(duì)象和閉包之間的關(guān)系很微妙，關(guān)于它們的文章已經(jīng)有很多，本文做了一些總結(jié)，需要的朋友可以參考下
2012-11-11
JS圖片定時(shí)翻滾效果實(shí)現(xiàn)方法
這篇文章主要介紹了JS圖片定時(shí)翻滾效果實(shí)現(xiàn)方法,涉及javascript結(jié)合時(shí)間函數(shù)實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)切換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2016-06-06
腳本吧 - 幻宇工作室用到j(luò)s,超強(qiáng)推薦base.js
腳本吧 - 幻宇工作室用到j(luò)s,超強(qiáng)推薦base.js...
2006-12-12
基于JavaScript實(shí)現(xiàn)五子棋游戲
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
Echarts基本用法_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了Echarts基本用法，詳解的介紹了Echarts的基本用法和實(shí)例，有興趣的可以了解一下
2017-08-08
js下為表格內(nèi)部動(dòng)態(tài)添加行的代碼
最近的一個(gè)項(xiàng)目中在保存表單數(shù)據(jù)時(shí)，要用到一個(gè)動(dòng)態(tài)添加行的功能。平時(shí)動(dòng)態(tài)添加行只是在表格的最下面添加，現(xiàn)在在表格中間動(dòng)態(tài)添加行，而且表格內(nèi)部是包含并且單元格的，其實(shí)很簡(jiǎn)單，下面貼出代碼。
2010-06-06
JavaScript中的創(chuàng)建枚舉四種方式
枚舉是一種數(shù)據(jù)結(jié)構(gòu)，它定義了一個(gè)有限的具名常量集，每個(gè)常量都可以通過(guò)其名稱來(lái)訪問(wèn)，這篇文章主要介紹了JavaScript中的四種枚舉方式,需要的朋友可以參考下
2023-05-05
為JavaScript提供睡眠功能(sleep) 自編譯JS引擎
如何在js中讓函數(shù)睡眠多少秒? 經(jīng)常會(huì)有Javascript初學(xué)者提出這樣的問(wèn)題,自從js出現(xiàn)以來(lái).
2010-08-08
Javascript 拖拽的一些高級(jí)的應(yīng)用(逐行分析代碼，讓你輕松了拖拽的原理)
這篇文章主要介紹了Javascript 拖拽的一些高級(jí)的應(yīng)用(逐行分析代碼，讓你輕松了拖拽的原理),需要的朋友可以參考下
2015-01-01
js觸發(fā)asp.net的Button的Onclick事件應(yīng)用
由于asp.net采用的是事件驅(qū)動(dòng)模式，所以默認(rèn)用戶按回車并沒(méi)有觸發(fā)按鈕的onclick事件。用戶按回車也不是沒(méi)有提交表單，通過(guò)httpwath可以看到，實(shí)際上頁(yè)面表單是提交到了form下的action頁(yè)面，只不過(guò)沒(méi)有觸發(fā)onclick事件而已,感興趣的朋友可以了解下，或許對(duì)你有所幫助
2013-02-02