JS实现适合于后台使用的动画折叠菜单效果

网络编程 2024/11/9 佚名

3 2 1

本文实例讲述了JS实现适合于后台使用的动画折叠菜单效果。分享给大家供大家参考。具体如下：

这是一款适合于后台使用的动画折叠菜单，代码超简，无jQuery，展开与折叠效果平滑。本演示中有两组菜单，向大家展示如何在一个网页中布局两个菜单，整体效果以及兼容性还算可以，希望在实际应用中不会出现什么问题。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-ht-control-animate-zd-menu-codes/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>适合于后台使用的动画折叠菜单</title>
<script type="text/javascript">
 function FOLDMenu(id,onlyone){
  if(!document.getElementById || !document.getElementsByTagName){return false;}
  this.menu=document.getElementById(id);
  this.submenu=this.menu.getElementsByTagName("ul");
  this.speed=3;
  this.time=10;
  this.onlyone=onlyone==true"a");
 }
 FOLDMenu.prototype.init=function(){
  var mainInstance = this;
  for(var i=0;i<this.submenu.length;i++){
   this.submenu[i].getElementsByTagName("span")[0].onclick=function(){
    mainInstance.toogleMenu(this.parentNode);
   };
  }
  for(var i=0;i<this.links.length;i++){
   this.links[i].onclick=function(){
    this.className = "current";
    mainInstance.removeCurrent(this);
   }
  }
 }
 FOLDMenu.prototype.removeCurrent = function(link){
   for (var i = 0; i < this.links.length; i++){
    if (this.links[i] != link){
     this.links[i].className = " "; 
    }
   }
 }
 FOLDMenu.prototype.toogleMenu=function(submenu){
  if(submenu.className=="open"){
   this.closeMenu(submenu);
  }else{
   this.openMenu(submenu);
  }
 }
 FOLDMenu.prototype.openMenu=function(submenu){
  var fullHeight=submenu.getElementsByTagName("span")[0].offsetHeight;
  var links = submenu.getElementsByTagName("a");
  for (var i = 0; i < links.length; i++){
   fullHeight += links[i].offsetHeight;
  }
   var moveBy = Math.round(this.speed * links.length); 
   var mainInstance = this; 
    var intId = setInterval(function() { 
     var curHeight = submenu.offsetHeight; 
     var newHeight = curHeight + moveBy; 
     if (newHeight <fullHeight){
      submenu.style.height = newHeight + "px";
     }else {
      clearInterval(intId);
      submenu.style.height = ""; 
      submenu.className = "open";
     } 
    }, this.time); 
    this.collapseOthers(submenu);
 }
 FOLDMenu.prototype.closeMenu=function(submenu){
   var minHeight=submenu.getElementsByTagName("span")[0].offsetHeight;
   var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
   var mainInstance = this;
    var intId = setInterval(function() {
     var curHeight = submenu.offsetHeight;
     var newHeight = curHeight - moveBy;
     if (newHeight > minHeight){
      submenu.style.height = newHeight + "px";
     }else {
      clearInterval(intId);
      submenu.style.height = ""; 
      submenu.className = "";
     } 
    }, this.time); 
 }
 FOLDMenu.prototype.collapseOthers = function(submenu){
  if(this.onlyone){
   for (var i = 0; i < this.submenu.length; i++){
    if (this.submenu[i] != submenu){
     this.closeMenu(this.submenu[i]); 
    }
   }
  }
 }
</script>
<style type="text/css">
*{margin:0;padding:0;}
.foldmenu{border:1px solid #000;width:150px;margin:50px;}
.foldmenu ul{list-style-type:none;height:25px;line-height:25px;overflow:hidden;cursor:pointer;}
.foldmenu ul.open{height:auto;}
.foldmenu ul span{display:block;padding-left:5px}
.foldmenu ul li{border-bottom:1px solid #DDDDDD;}
.foldmenu li a{background-color:#EEEEEE;color:#006666;display:block;padding:5px 10px;text-decoration:none;text-align:center;}
.foldmenu li a:hover{background-color:#006666;color:#ffffff;}
.foldmenu li a.current{background-color:#006666;color:#ffffff;}
</style>
</head>
<body>
<div id="foldmenu" class="foldmenu" style="float:left;">
 <ul class="open">
  <span>编程天地</span>
 <li><a href="#">电子书籍</a></li>
 <li><a href="#">源码乐园</a></li>
 </ul>
 <ul>
  <span>中国门户</span>
 <li><a href="#">百度搜索</a></li>
 <li><a href="#">新浪新闻</a></li>
  <li><a href="#">腾讯QQ</a></li>
 </ul>
 <ul>
  <span>音乐网站</span>
 <li><a href="#">百度音乐</a></li>
 <li><a href="#">QQ163</a></li>
 </ul>
</div>
<div id="foldmenu2" class="foldmenu" style="float:right;">
 <ul class="open">
  <span>世界大学</span>
 <li><a href="#">剑桥</a></li>
 <li><a href="#">牛津</a></li>
  <li><a href="#">哈佛</a></li>
 <li><a href="#">麻省理工</a></li>
 </ul>
 <ul>
  <span>中国大学</span>
 <li><a href="#">北大</a></li>
 <li><a href="#">清华</a></li>
  <li><a href="#">港大</a></li>
 </ul>
 <ul>
  <span>世界好车</span>
 <li><a href="#">宝马</a></li>
 <li><a href="#">奔驰</a></li>
 <li><a href="#">奥迪</a></li>
 </ul>
 <ul>
  <span>开源论坛</span>
 <li><a href="#">PhpWind</a></li>
 <li><a href="#">Discuz!</a></li>
 </ul>
</div>
<script type="text/javascript">
window.onload = function() {
 myMenu = new FOLDMenu("foldmenu",true);
 myMenu.init();
 myMenu2 = new FOLDMenu("foldmenu2");
 myMenu2.init();
};
</script>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

JS,后台使用,动画,折叠菜单,JS菜单

标签：

JS,后台使用,动画,折叠菜单,JS菜单

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“JS实现适合于后台使用的动画折叠菜单效果”

JS实现适合于后台使用的动画折叠菜单效果

暂无“JS实现适合于后台使用的动画折叠菜单效果”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

JS实现适合于后台使用的动画折叠菜单效果

JS,后台使用,动画,折叠菜单,JS菜单

基于insertBefore制作简单的循环插空效果

jQuery实现响应鼠标滚动的动感菜单效果

评论“JS实现适合于后台使用的动画折叠菜单效果”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

JS实现适合于后台使用的动画折叠菜单效果

JS,后台使用,动画,折叠菜单,JS菜单

基于insertBefore制作简单的循环插空效果

jQuery实现响应鼠标滚动的动感菜单效果

评论“JS实现适合于后台使用的动画折叠菜单效果”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存