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

前端技术 2023/09/10 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>

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/26246

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案