JS实现光滑展开合拢的菜单效果代码


Posted in Javascript onSeptember 16, 2015

本文实例讲述了JS实现光滑展开合拢的菜单效果代码。分享给大家供大家参考。具体如下:

这是一个光滑展开又合拢的JS菜单效果,无jQuery插件,完全JavaScript代码实现,没有过多修饰,有兴趣的美化一下,肯定是款不错的折叠菜单。

运行效果截图如下:

JS实现光滑展开合拢的菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="html/txt; charset=utf-8" />
<title>光滑展开合拢的JS菜单效果</title>
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
#con{width:164px; margin:50px auto 0;}
#con h4.top{ height:4px; width:164px; overflow:hidden;}
#con h4.bottom{height:4px; width:164px;overflow:hidden;}
#con div{height:0px; overflow:hidden;}
#con h3{border-top:2px solid #fff; border-bottom:1px solid #D6EFFF;}
</style>
<script language="javascript">
var speed = 30;
var oCon = null; 
var oH3List = null;
var oDivList = null;
var oUlList = null;
var oldNum = null;
var clickNum = null;
var hideTimer=null;
var showTimer=null;
window.onload=function(){
 oCon = document.getElementById("con");
 oH3List = oCon.getElementsByTagName("h3");
 oUlList = oCon.getElementsByTagName("ul");
 oDivList = oCon.getElementsByTagName("div");
 for(var i=0;i<oUlList.length;i++){
  oH3List[i].xuhao=i;
  oH3List[i].onclick=function(){
   clickNum =this.xuhao;
   changeCatalog();
  };
 }
} 
function changeCatalog(){
 var old_num_2,click_num_2;
 old_num_2 = null;
 click_num_2= null;
 if(oldNum==null){
  click_Num_2=clickNum;
  showTimer = setInterval("showUl("+click_Num_2+")",speed);
 }else if(oldNum == clickNum){
  old_num_2=oldNum;
  hideTimer = setInterval("hideUl("+old_num_2+")",speed);
 }else{
  old_num_2=oldNum;
  click_num_2=clickNum;
  hideTimer = setInterval("hideUl("+old_num_2+")",speed);
  showTimer = setInterval("showUl("+click_num_2+")",speed);
 }
}
function showUl(num){
 var move_num1 =Math.ceil((oUlList[num].offsetHeight-oDivList[num].offsetHeight)/10);
 if(move_num1>=1){
  oDivList[num].style.height = oDivList[num].offsetHeight+move_num1+"px";
 }else{
  oldNum=num;
  clearInterval(showTimer);
 }
}
function hideUl(num){
 var move_num2=Math.ceil((oDivList[num].offsetHeight)/10);
 if(move_num2>0){
  oDivList[num].style.height=oDivList[num].offsetHeight -move_num2+"px";
 }else{
  clearInterval(hideTimer);
  if(clickNum==num){
   oldNum=null;
  }
 }
}
</script>
</head> 
<body>
<div id="con">
 <h4 class="top"></h4>
 <h1></h1>
 <h3>设计素材</h3>
 <div>
  <ul>
   <li>精品图标</li>
   <li>图片幻灯</li>
   <li>网页播放器</li>
  </ul>
 </div>
 <h3>模板素材</h3>
 <div>
  <ul>
   <li>企业网站</li>
   <li>儿童网站</li>
   <li>音乐网站</li>
   <li>Discuz模板</li>
  </ul>
 </div>
 <h3>脚本下载</h3>
 <div>
  <ul>
   <li>jQuery</li>
   <li>Ajax</li>
   <li>PHP</li>
  </ul>
 </div>
 <h3>网页特效</h3>
 <div>
  <ul>
   <li>菜单</li>
   <li>表单</li>
   <li>浏览器</li>
  </ul>
 </div>
 <h4 class="bottom"></h4>
</div> 
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
详解Webpack多环境代码打包的方法
Aug 03 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
Jul 15 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 #Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 #Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 #Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 #Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 #Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 #Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 #Javascript
You might like
东方红 - 来复式再生机的修复
2021/03/02 无线电
一个程序下载的管理程序(一)
2006/10/09 PHP
PHP sprintf()函数用例解析
2011/05/18 PHP
php 注册时输入信息验证器的实现详解
2013/07/05 PHP
php构造函数实例讲解
2013/11/13 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
详解如何较好的使用js
2016/12/16 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python3操作mysql数据库的方法
2017/06/23 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
Python函数参数操作详解
2018/08/03 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
如何给Python代码进行加密
2020/01/10 Python
Django关于admin的使用技巧和知识点
2020/02/10 Python
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
工商管理毕业生推荐信
2013/12/24 职场文书
主办会计岗位职责
2014/03/13 职场文书
领导参观欢迎词
2015/01/26 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
vue3中provide && inject的使用
2021/07/01 Vue.js