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

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

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

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-swift-fade-in-out-menu-style-codes/

具体代码如下:

<!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程序设计有所帮助。

(0)

相关推荐

  • JS实现自动固定顶部的悬浮菜单栏效果

    本文实例讲述了JS实现自动固定顶部的悬浮菜单栏效果.分享给大家供大家参考.具体如下: 这是一款自动固定顶部的悬浮菜单栏代码,不管你如何拉动滚动条,它会始终显示在网页的最顶部,用作网站的顶级导航或公告之类的比较合适吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fix-top-float-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

  • JS实现具备延时功能的滑动门菜单效果

    本文实例讲述了JS实现具备延时功能的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一款鼠标感应时间延迟的滑动门菜单,其实也就是一滑动门,只不过鼠标在移上后不是立即反应,而是稍微迟缓了一下,这样用也是有好处的,这个时间根据你的喜好是可以调整的,本滑动门你可轻易修改外观,把它变成一个内容扩展的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-delay-style-show-menu-codes/ 具体代码如下: <!DOCTYP

  • javascript延时重复执行函数 lLoopRun.js

    function lLoopRun(sFuncLoop,sFuncEnd,nDelay) { //writen by http://fengyan.iecn.cn //sFuncLoop >> 字符串型,需要重复执行的Javascript函数或语句(多个函数或语句请用;分隔) //sFuncEnd >> 字符串型,用于中止重复执行动作(sFuncLoop)的Javascript函数或语句 //nDelay >> 数字型,重复执行的时间间隔(毫秒数) var vinter

  • js实现仿京东2级菜单效果(带延时功能)

    本文实例讲述了jquery实现仿京东2级菜单效果.分享给大家供大家参考.具体如下: 这里介绍js实现仿京东2级菜单效果代码,带有延时功能,操作上更加舒适自然. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fjd-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

  • JS运行耗时操作的延时显示方法

    代码如下: 复制代码 代码如下: document.getElementById("btnConnect").value = "连接中"; Connect(); // 很耗时的操作 document.getElementById("btnConnect").value = "已连接"; 执行的时候发现,按钮并没有改为"连接中"的状态,而是等Connect();执行完以后才快速改为"连接中"

  • JS实现带有抽屉效果的产品类网站多级导航菜单代码

    本文实例讲述了JS实现带有抽屉效果的产品类网站多级导航菜单代码.分享给大家供大家参考.具体如下: 这是一款像抽屉一样的菜单,多用在产品网站,比如IT产品网站的分类导航上,菜单结构清淅,样式新颖,设计美观,主要是运用JavaScript技术实现,用CSS配合实现菜单背景的构建,总体来说,是学习Js多级分类菜单的好范例. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ct-style-product-web-nav-menu-codes/ 具

  • 一段实现页面上的图片延时加载的js代码

    相关地址:http://list.taobao.com/browse/30-50029375/n-1----------------------0---------yes-------g,ge3denzxhazdumzsgy3tsnzq-----------------------42-grid-commend-0-all-50029375.htm?TBG=14153.14.7&ssid=r18-s18 http://shop.qq.com/shopList.html 大家如果使用firebug

  • 延时重复执行函数 lLoopRun.js

    公司的一个项目中,有许多地方需要延时执行一些可重复性的函数(动作),就写了下面这段函数. 呵呵,不知道取什么意思更为确切些,就定为了:LoopRun,意为"重复执行"  function lLoopRun(sFuncLoop,sFuncEnd,nDelay) {   var vintervalId = null;   var runString  = sFuncLoop;   var stopString  = sFuncEnd;   var delayTime  = nDelay;

  • 网页图片延时加载的js代码

    实现原理 把所有需要延时加载的图片改成如下的格式: <img lazy_src="图片路径" border="0"/> 然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,然后把延时加载的图片中top小于当前可视区域(即图片出现在可视区域内)的图片的src的值用lazy_src的来替换(加载图片) 代码 lazyLoad=(function() { var map_element = {}; var el

  • JS实现无限级网页折叠菜单(类似树形菜单)效果代码

    本文实例讲述了JS实现无限级网页折叠菜单(类似树形菜单)效果代码.分享给大家供大家参考.具体如下: 这是一款超不错的网页折叠菜单,采用JavaScript实现.折叠菜单是大家比较常见到的一种菜单形式,可广泛应用于管理系统.后台左侧.产品列表中,本折叠菜单有点树形菜单的味道,相信"无限级"会满足你的要求. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-unlimit-fade-in-out-tree-menu-codes/ 具体代

  • JS图片根据鼠标滚动延时加载的实例代码

    最近研究了京东商城用jQuery的实现如下:就是默认地址赋给img标签的src2属性,显示时赋给src属性值. 复制代码 代码如下: function lazyload(option) {    var settings = {defObj: null,defHeight: 0    };    settings = $.extend(settings, option || {});    var defHeight = settings.defHeight;    var defObj = (

随机推荐