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程序设计有所帮助。
相关推荐
-
JS图片根据鼠标滚动延时加载的实例代码
最近研究了京东商城用jQuery的实现如下:就是默认地址赋给img标签的src2属性,显示时赋给src属性值. 复制代码 代码如下: function lazyload(option) { var settings = {defObj: null,defHeight: 0 }; settings = $.extend(settings, option || {}); var defHeight = settings.defHeight; var defObj = (
-
延时重复执行函数 lLoopRun.js
公司的一个项目中,有许多地方需要延时执行一些可重复性的函数(动作),就写了下面这段函数. 呵呵,不知道取什么意思更为确切些,就定为了:LoopRun,意为"重复执行" function lLoopRun(sFuncLoop,sFuncEnd,nDelay) { var vintervalId = null; var runString = sFuncLoop; var stopString = sFuncEnd; var delayTime = nDelay;
-
一段实现页面上的图片延时加载的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
-
JS实现自动固定顶部的悬浮菜单栏效果
本文实例讲述了JS实现自动固定顶部的悬浮菜单栏效果.分享给大家供大家参考.具体如下: 这是一款自动固定顶部的悬浮菜单栏代码,不管你如何拉动滚动条,它会始终显示在网页的最顶部,用作网站的顶级导航或公告之类的比较合适吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fix-top-float-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
-
javascript延时重复执行函数 lLoopRun.js
function lLoopRun(sFuncLoop,sFuncEnd,nDelay) { //writen by http://fengyan.iecn.cn //sFuncLoop >> 字符串型,需要重复执行的Javascript函数或语句(多个函数或语句请用;分隔) //sFuncEnd >> 字符串型,用于中止重复执行动作(sFuncLoop)的Javascript函数或语句 //nDelay >> 数字型,重复执行的时间间隔(毫秒数) var vinter
-
网页图片延时加载的js代码
实现原理 把所有需要延时加载的图片改成如下的格式: <img lazy_src="图片路径" border="0"/> 然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,然后把延时加载的图片中top小于当前可视区域(即图片出现在可视区域内)的图片的src的值用lazy_src的来替换(加载图片) 代码 lazyLoad=(function() { var map_element = {}; var el
-
JS运行耗时操作的延时显示方法
代码如下: 复制代码 代码如下: document.getElementById("btnConnect").value = "连接中"; Connect(); // 很耗时的操作 document.getElementById("btnConnect").value = "已连接"; 执行的时候发现,按钮并没有改为"连接中"的状态,而是等Connect();执行完以后才快速改为"连接中"
-
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
本文实例讲述了JS实现无限级网页折叠菜单(类似树形菜单)效果代码.分享给大家供大家参考.具体如下: 这是一款超不错的网页折叠菜单,采用JavaScript实现.折叠菜单是大家比较常见到的一种菜单形式,可广泛应用于管理系统.后台左侧.产品列表中,本折叠菜单有点树形菜单的味道,相信"无限级"会满足你的要求. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-unlimit-fade-in-out-tree-menu-codes/ 具体代
-
JS实现带有抽屉效果的产品类网站多级导航菜单代码
本文实例讲述了JS实现带有抽屉效果的产品类网站多级导航菜单代码.分享给大家供大家参考.具体如下: 这是一款像抽屉一样的菜单,多用在产品网站,比如IT产品网站的分类导航上,菜单结构清淅,样式新颖,设计美观,主要是运用JavaScript技术实现,用CSS配合实现菜单背景的构建,总体来说,是学习Js多级分类菜单的好范例. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ct-style-product-web-nav-menu-codes/ 具
-
JS实现具备延时功能的滑动门菜单效果
本文实例讲述了JS实现具备延时功能的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一款鼠标感应时间延迟的滑动门菜单,其实也就是一滑动门,只不过鼠标在移上后不是立即反应,而是稍微迟缓了一下,这样用也是有好处的,这个时间根据你的喜好是可以调整的,本滑动门你可轻易修改外观,把它变成一个内容扩展的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-delay-style-show-menu-codes/ 具体代码如下: <!DOCTYP
-
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: