js实现顶部可折叠的菜单工具栏效果实例

2024-05-06 16:19:45

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了js实现顶部可折叠的菜单工具栏效果,可实现鼠标滑过菜单工具栏出现折叠与展开效果,涉及javascript鼠标事件及样式的操作技巧,需要的朋友可以参考下

本文实例讲述了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>