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的试卷自动排版系统实现代码
Jan 06 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
JS定时器实例详细分析
Oct 11 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
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
drupal 代码实现URL重写
2011/05/04 PHP
rrmdir php中递归删除目录及目录下的文件
2011/05/15 PHP
php检测文件编码的方法示例
2014/04/25 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
原生JS实现的简单小钟表功能示例
2018/08/30 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
vue分页器组件编写方法详解
2019/06/28 Javascript
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
使用python获取邮箱邮件的设置方法
2019/09/20 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
摩托车和ATV零件、配件和服装的首选在线零售商:MotoSport
2017/12/22 全球购物
文员自我评价怎么写
2013/09/19 职场文书
管道维修工岗位职责
2013/12/27 职场文书
国培远程培训感言
2014/03/08 职场文书
青年志愿者活动总结
2014/04/26 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
安全保证书怎么写
2015/02/28 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
使用 JavaScript 制作页面效果
2021/04/21 Javascript