这篇文章主要介绍了 js 实现顶部可折叠的菜单工具栏效果, 可实现鼠标滑过菜单工具栏出现折叠与展开效果, 涉及 javascript 鼠标事件及样式的操作技巧, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 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 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0302/271423.html