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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
Js动态添加复选框Checkbox的实例方法
Apr 08 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
微信公众号网页分享功能开发的示例代码
May 27 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 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
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
PHP四大安全策略
2014/03/12 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
PHP弱类型语言中类型判断操作实例详解
2017/08/10 PHP
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
python实现一组典型数据格式转换
2018/12/15 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
浅析python redis的连接及相关操作
2019/11/07 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
国外平面设计第一市场:99designs
2016/10/25 全球购物
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
共产党员承诺书
2014/03/25 职场文书
经营管理策划方案
2014/05/22 职场文书
学习型班组申报材料
2014/05/31 职场文书
辞职信怎么写
2015/02/27 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
大学开学感言
2015/08/01 职场文书
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
Python实现简单的俄罗斯方块游戏
2021/09/25 Python