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 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
jquery实现用户打分评分特效
May 28 Javascript
js禁止页面刷新与后退的方法
Jun 08 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
JS document内容及样式操作完整示例
Jan 14 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连接Access数据库错误及解决方法
2013/06/20 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
CodeIgniter错误mysql_connect(): No such file or directory解决方法
2014/09/06 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
2015/06/04 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
javascript+css实现俄罗斯方块小游戏
2020/06/28 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
Python制作Windows系统服务
2017/03/25 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
家庭户外服装:Hawkshead
2017/11/02 全球购物
学生会部长竞聘书
2014/03/31 职场文书
工地门卫岗位职责范本
2014/07/01 职场文书
考试作弊检讨
2015/01/27 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书