Maison > Article > interface Web > JS implémente les compétences code_javascript de l'effet de menu télescopique dynamique d'étirement horizontal

JS implémente les compétences code_javascript de l'effet de menu télescopique dynamique d'étirement horizontal

WBOYoriginal: 2016-05-16 15:40:521593parcourir

L'exemple de cet article décrit le code JS pour implémenter l'effet de menu télescopique dynamique d'étirement horizontal. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'une implémentation JS de l'étirement vertical à l'étirement horizontal, d'un menu télescopique dynamique et d'un menu CSS étroitement organisé. Il peut être utilisé comme menu dans des positions importantes telles que les blogs. apprendre la conception frontale JavaScript.

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-row-show-menu-style-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=gb2312" />
<title>有弹性的菜单</title>
<style>
*{ margin:0px; padding:0px;} body { background:#fff;} .naver{list-style-type:
none; width:700px; overflow:hidden; margin:100px auto 0;} .naver li{ width:100px;
height:50px; overflow:hidden; font-size:16px; text-align:center; cursor:
pointer; } .naver li a,.naver li a:hover{display: block;width:100px; height:50px;
line-height: 50px; color:#FFF; text-decoration: none; } .co1{ background:#649e37}
.co2{ background:#028fbc}
</style>
<script type="text/javascript">
  window.onload = function() {
   var oUl = document.getElementById("nav");
   var aLi = oUl.getElementsByTagName("li");
   var i = 0;
   for (i = 0; i < aLi.length; i++) {
    aLi[i].timer = null;
    aLi[i].speed = 0;
    aLi[i].onmouseover = function() {
     startMove(this, 250);
    };
    aLi[i].onmouseout = function() {
     startMove2(this, 100);
    };
   }
  };
  function startMove(obj, iTarget) {
   if (obj.timer) {
    clearInterval(obj.timer);
   }
   obj.timer = setInterval(function() {
    doMove(obj, iTarget);
   }, 30)
  };
  function doMove(obj, iTarget) {
   obj.speed += 3;
   if (Math.abs(iTarget - obj.offsetWidth) < 1 && Math.abs(obj.speed) < 1) {
    clearInterval(obj.timer);
    obj.timer = null;
   }
   else {
    if (obj.offsetWidth + obj.speed >= iTarget) {
     obj.speed *= -0.7;
     obj.style.width = iTarget + "px";
    }
    else {
     obj.style.width = obj.offsetWidth + obj.speed + "px";
    }
   }
  };
  function startMove2(obj, iTarget) {
   if (obj.timer) {
    clearInterval(obj.timer);
   }
   obj.timer = setInterval(function() {
    doMove2(obj, iTarget);
   }, 30)
  };
  function doMove2(obj, iTarget) {
   obj.speed -= 3;
   if (Math.abs(iTarget - obj.offsetWidth) < 1 && Math.abs(obj.speed) < 1) {
    clearInterval(obj.timer);
    obj.timer = null;
   }
   else {
    if (obj.offsetWidth + obj.speed <= iTarget) {
     obj.speed *= -0.7;
     obj.style.width = iTarget + "px";
    }
    else {
     obj.style.width = obj.offsetWidth + obj.speed + "px";
    }
   }
  };
</script>
</head>
<body>
 <ul id="nav" class="naver">
  <li class="co1">
   <a href="#">首页</a>
  </li>
  <li class="co2">
   <a href="#">爱好</a>
  </li>
  <li class="co1">
   <a href="#">作品</a>
  </li>
  <li class="co2">
   <a href="#">联系</a>
  </li>
  <li class="co1">
   <a href="#">博客</a>
  </li>
 </ul>
</body>
</html>

J'espère que cet article sera utile à la conception de 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：Explication détaillée des opérations de date javascript (organisées par Script House)_Heure et dateArticle suivant：Explication détaillée des opérations de date javascript (organisées par Script House)_Heure et date

Articles Liés

Voir plus