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 相关文章推荐
Jquery 基础学习笔记之文档处理
May 29 Javascript
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
vue实现表单录入小案例
Sep 27 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 Javascript
Ajax常用封装库——Axios的使用
May 08 Javascript
Vite + React从零开始搭建一个开源组件库
Jun 25 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
PHP中动态HTML的输出技术
2006/10/09 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
JavaScript Konami Code 实现代码
2009/07/29 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
深入理解python对json的操作总结
2017/01/05 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
python实现弹窗祝福效果
2019/04/07 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
运动会领导邀请函
2014/01/10 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
我的长生果教学反思
2014/04/28 职场文书
领导班子四风表现材料
2014/08/23 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
技术入股合作协议书
2014/10/07 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android