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中的Array对象使用说明
Jan 17 Javascript
拉动滚动条加载数据的jquery代码
May 03 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 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
PHP获取MAC地址的函数代码
2011/09/11 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
2012/10/29 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
2017/10/12 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
微信小程序实现文件预览
2020/10/22 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
使用Python刷淘宝喵币(低阶入门版)
2019/10/30 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
2016/03/14 HTML / CSS
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
暑假社会实践心得体会
2014/09/02 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python