这篇文章主要介绍了 javascript 简单实现滑动菜单效果的方法, 实例分析了 javascript 通过对页面元素与相关属性的操作实现滑动菜单效果的相关技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 javascript 简单实现滑动菜单效果的方法。分享给大家供大家参考。具体如下:
整个 javascript 代码共 42 行,其中主要函数 Slide 代码 26 行, 可以改进哦!
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 滑动菜单
- </title>
- <style>
- a,body,div,h1,h2,li,ul{ margin:0; padding:0 } a{display:block;text-decoration:none;height:25px;color:#456;background-color:#ABC;cursor:pointer;}
- a:hover{color:#123;background-color:#789;font-weight:bold;} body{ font:12px/18px
- "Times New Roman",Times,"宋体",serif; text-align:center; } h1{ height:100px;
- width:25px; position:absolute; top:-1px; left:123px; cursor:pointer; color:#89A;
- font-size:18px; line-height:50px; background-color:#234; } h2{ height:24px;
- font-size:12px; border-bottom:1px solid #4C6CB9; color:#BBB; font-weight:600;
- cursor:pointer; } li{height:25px;list-style:none} #Container{width:800px;background-color:#DDD;border:
- 1px solid #999;margin:10px auto} #Top{height:30px;background-color:#DDD;border:
- 1px solid #999;} #Logo{height:100px;background-color:#DDD;border: 1px solid
- #999;} #Nav{height:30px;background-color:#DDD;border: 1px solid #999;}
- #SideBar{ position:fixed!important; position:absolute; top:200px; left:0px;
- } #SideBar a,#SideBar h2,#SideBar li,#SideBar ul{width:120px} #Main{height:800px;background-color:#DDD;border:
- 1px solid #999;} #Footer{height:60px;background-color:#DDD;border: 1px
- solid #999;} .Extracted{width:0px;} .Extrended{border:1px solid #555;background-color:#000;padding:1px}
- </style>
- </head>
- <body>
- <div id="Container">
- <div id="Top">
- 顶条
- </div>
- <div id="Logo">
- Logo
- </div>
- <div id="Nav">
- 导航条
- </div>
- <div id="SideBar" class="Extrended">
- <h1>
- 菜单
- </h1>
- <ul>
- <h2>
- 功能栏1
- </h2>
- <li>
- <a href="">
- 功能1
- </a>
- </li>
- <li>
- <a href="">
- 功能2
- </a>
- </li>
- <li>
- <a href="">
- 功能3
- </a>
- </li>
- <li>
- <a href="">
- 功能4
- </a>
- </li>
- <li>
- <a href="">
- 功能5
- </a>
- </li>
- </ul>
- <ul>
- <h2>
- 功能栏2
- </h2>
- <li>
- <a href="">
- 功能1
- </a>
- </li>
- <li>
- <a href="">
- 功能2
- </a>
- </li>
- <li>
- <a href="">
- 功能3
- </a>
- </li>
- <li>
- <a href="">
- 功能4
- </a>
- </li>
- <li>
- <a href="">
- 功能5
- </a>
- </li>
- </ul>
- <ul>
- <h2>
- 功能栏3
- </h2>
- <li>
- <a href="">
- 功能1
- </a>
- </li>
- <li>
- <a href="">
- 功能2
- </a>
- </li>
- <li>
- <a href="">
- 功能3
- </a>
- </li>
- <li>
- <a href="">
- 功能4
- </a>
- </li>
- <li>
- <a href="">
- 功能5
- </a>
- </li>
- </ul>
- <ul>
- <h2>
- 功能栏4
- </h2>
- <li>
- <a href="">
- 功能1
- </a>
- </li>
- <li>
- <a href="">
- 功能2
- </a>
- </li>
- <li>
- <a href="">
- 功能3
- </a>
- </li>
- <li>
- <a href="">
- 功能4
- </a>
- </li>
- <li>
- <a href="">
- 功能5
- </a>
- </li>
- </ul>
- <ul>
- <h2>
- 功能栏5
- </h2>
- <li>
- <a href="">
- 功能1
- </a>
- </li>
- <li>
- <a href="">
- 功能2
- </a>
- </li>
- <li>
- <a href="">
- 功能3
- </a>
- </li>
- <li>
- <a href="">
- 功能4
- </a>
- </li>
- <li>
- <a href="">
- 功能5
- </a>
- </li>
- </ul>
- <ul>
- <h2>
- 功能栏6
- </h2>
- <li>
- <a href="">
- 功能1
- </a>
- </li>
- <li>
- <a href="">
- 功能2
- </a>
- </li>
- <li>
- <a href="">
- 功能3
- </a>
- </li>
- <li>
- <a href="">
- 功能4
- </a>
- </li>
- <li>
- <a href="">
- 功能5
- </a>
- </li>
- </ul>
- </div>
- <div id="Main">
- 内容区
- </div>
- <div id="Footer">
- 底条
- </div>
- </div>
- <script type="text/javascript">
- function $(e) {
- return document.getElementById(e)
- }
- function Slide(Element, Mod) {
- var LongthMax, LongthMin, Property, Count = 25,
- Accum, ID, Dlt, DltDlt;
- if (Mod) {
- Property = 'left';
- LongthMax = 0;
- LongthMin = -124;
- } else {
- Property = 'height';
- LongthMax = Element.children.length * 25;
- LongthMin = 25;
- }
- DltDlt = (LongthMax - LongthMin) / (Count * 5);
- if (Element.style[Property] == LongthMax + 'px') DltDlt = -DltDlt;
- Accum = parseInt(Element.style[Property]);
- Dlt = 7 * DltDlt;
- ID = setInterval(function() {
- if (Count--) {
- if (! (Count % 5)) Dlt -= DltDlt;
- Accum += Dlt;
- Element.style[Property] = Math.floor(Accum) + 'px';
- return
- }
- clearInterval(ID);
- Element.style[Property] = (DltDlt > 0) ? LongthMax + 'px': LongthMin + 'px';
- },
- 20);
- }
- $('SideBar').style.left = '0px';
- $('SideBar').children[0].onclick = function() {
- Slide(this.parentNode, 1);
- }; (function(Menu, i, tmp) {
- Menu = document.getElementsByTagName('ul');
- for (i = Menu.length; i--;) {
- tmp = Menu[i];
- tmp.style.overflow = 'hidden';
- tmp.style.height = '25px';
- tmp.children[0].onclick = function() {
- Slide(this.parentNode, 0);
- };
- }
- } ());
- </script>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: