Maison > Article > interface Web > Framework de mouvement JavaScript - exemple de code du mouvement en chaîne au mouvement parfait (5)

Framework de mouvement JavaScript - exemple de code du mouvement en chaîne au mouvement parfait (5)

黄舟original: 2017-05-21 13:25:421342parcourir

Cet article présente principalement la cinquième partie du JavaScriptMotionFramework, du mouvement en chaîne au mouvement parfait. Il a une certaine valeur de référence. >

Basé sur le cadre de mouvement des articles précédents, cet article explique principalement le mouvement en chaîne, qui consiste à continuer le mouvement après le mouvement. Par exemple, dans de nombreux sites Web, l'apparition d'une boîte et la

sortie. : Lorsqu'il apparaît, il devient d'abord plus large puis plus haut ; lorsqu'il sort, il devient d'abord plus court puis plus étroit pour sortir ! Le
modèle précédent est :

startMove(obj, json);

Maintenant, remplacez par :

startMove(obj, json, fn);

C'est-à-dire que fn() est exécuté à la fin du premier mouvement ; fn est un paramètre transmis. Ce paramètre est une

fonction Une fois que timer est nettoyé, exécutez manuellement fn(); (obj, json, fn), puis appelez startMove(obj, json, fn) dans le fn à l'intérieur, et vous pouvez continuer à jouer

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>运动框架(五)：链式运动到完美运动</title>
  <style type="text/css">
    p {
      width: 100px;
      height: 100px;
      background: orange;
      margin: 10px;
      float: left;
    }
  </style>
</head>
<body>
  <p id="p1"></p>

  <script type="text/javascript">
    var op = document.getElementById(&#39;p1&#39;);
    op.onmouseover = function() {
      startMove(op, {width:300,opacity:30}, function() {
        startMove(op, {height:500});
      });
    };
    op.onmouseout = function() {
      startMove(op, {height:100}, function() {
        startMove(op, {width:100,opacity:100});
      })
    };

    function getStyle(obj, attr) {
      if (obj.currentStyle) {
        return obj.currentStyle[attr];
      } else {
        return getComputedStyle(obj, null)[attr];
      }
    }

    function startMove(obj, json, fn) {
      clearInterval(obj.timer);
      obj.timer = setInterval(function() {
        var bStop = true;
        for (var attr in json) {
          var cur = 0;
          if (attr === &#39;opacity&#39;) {
            cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
          } else {
            cur = parseInt(getStyle(obj, attr));
          }
          if (cur != json[attr]) {
            bStop = false;
          }
          var speed = (json[attr] - cur)/10;
          speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
          cur += speed;
          if (attr === &#39;opacity&#39;) {
            obj.style.filter = &#39;alpha(opacity:&#39; + cur + &#39;)&#39;;
            obj.style.opacity = cur/100;
          } else {
            obj.style[attr] = cur + &#39;px&#39;;
          }

        }
        if (bStop) {
          clearInterval(obj.timer);
          if (fn) fn();
        }

      }, 30);
    }
  </script>
</body>
</html>

L'image de mouvement parfaite extraite finale est la suivante, motionFrame. js :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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：Une introduction détaillée au mouvement à valeurs multiples dans le framework de mouvement JavaScript (4)Article suivant：Une introduction détaillée au mouvement à valeurs multiples dans le framework de mouvement JavaScript (4)

Articles Liés

Voir plus