recherche

Maison  >  Article  >  interface Web  >  JS implémente un effet de menu pliant animé adapté aux compétences d'utilisation en arrière-plan_javascript

JS implémente un effet de menu pliant animé adapté aux compétences d'utilisation en arrière-plan_javascript

WBOY
WBOYoriginal
2016-05-16 15:38:301318parcourir

L'exemple de cet article décrit l'implémentation JS d'un effet de menu pliable animé adapté à une utilisation en arrière-plan. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un menu pliable animé adapté à une utilisation en arrière-plan. Le code est super simple, pas de jQuery, et les effets d'expansion et de pliage sont fluides. Il y a deux ensembles de menus dans cette démonstration pour vous montrer comment disposer deux menus dans une page Web. L'effet global et la compatibilité sont plutôt bons. J'espère qu'il n'y aura aucun problème dans les applications pratiques.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant : 

<!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&#63;onlyone:false;
  this.links = this.menu.getElementsByTagName("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>

J'espère que cet article sera utile à la programmation JavaScript de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter le changement de défilement du menu Tab avec jQuery_jqueryArticle suivant：Comment implémenter le changement de défilement du menu Tab avec jQuery_jquery

Articles Liés

Voir plus