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 相关文章推荐
javascript实现随时变化着的背景颜色
Apr 02 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
微信小程序scroll-view组件实现滚动动画
Jan 31 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
如何利用vue实现波谱拟合详解
Nov 05 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
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
我的论坛源代码(一)
2006/10/09 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
微信红包随机生成算法php版
2016/07/21 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
[01:04:05]VG vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
python中字典增加和删除使用方法
2020/09/30 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
介绍一下Java中的Class类
2015/04/10 面试题
网络书店创业计划书
2014/02/07 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
清明节寄语2015
2015/03/23 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
歌剧魅影观后感
2015/06/05 职场文书