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


Posted in Javascript onMay 09, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
jQuery的链式调用浅析
Dec 03 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
Angularjs单选改为多选的开发过程及问题解析
Feb 17 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 #Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 #Javascript
javasript实现密码的隐藏与显示
May 08 #Javascript
jquery实现动态改变div宽度和高度
May 08 #Javascript
jquery右下角自动弹出可关闭的广告层
May 08 #Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 #Javascript
JavaScript实现自动变换表格边框颜色
May 08 #Javascript
You might like
php5新改动之短标记启用方法
2008/09/11 PHP
php中实现记住密码自动登录的代码
2011/03/02 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
解析php中session的实现原理以及大网站应用应注意的问题
2013/06/17 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
PHP之header函数详解
2021/03/02 PHP
如何让浏览器支持jquery ajax load 前进、后退功能
2014/06/12 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
Python判断是否json是否包含一个key的方法
2018/12/31 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
python 命令行传入参数实现解析
2019/08/30 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
美丽的现代设计家具:2Modern
2018/07/26 全球购物
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
拓展策划方案
2014/06/03 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
庆七一活动总结
2014/08/27 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
2015年招商引资工作总结
2015/04/25 职场文书
公司承诺书格式范文
2015/04/28 职场文书
初中体育教学随笔
2015/08/15 职场文书