Heim > Artikel > Web-Frontend > js实现顶部可折叠的菜单工具栏效果实例_javascript技巧
js实现顶部可折叠的菜单工具栏效果实例_javascript技巧
- WBOYOriginal
- 2016-05-16 16:00:09987Durchsuche
本文实例讲述了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" style="max-width:90%" style="max-width:90%" alt="" />
</a>
<a href="#" title="">
<img src="2.gif" style="max-width:90%" style="max-width:90%" alt="" />
</a>
</div>
<div id="btn_offOn"><a href="#" title=""></a></div>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JavaScript基于setTimeout实现计数的方法_javascript技巧Nächster Artikel：jQuery基于图层模仿五星星评价功能的方法_jquery