Heim >Web-Frontend >js-Tutorial >JavaScript-Bewegungsframework – Beispielcode von der Kettenbewegung bis zur perfekten Bewegung (5)

JavaScript-Bewegungsframework – Beispielcode von der Kettenbewegung bis zur perfekten Bewegung (5)

黄舟Original: 2017-05-21 13:25:421374Durchsuche

In diesem Artikel wird hauptsächlich der fünfte Teil des JavaScriptFrameworks vorgestellt, der von der Kettenbewegung bis zur perfekten Bewegung reicht.

Basierend auf dem Bewegungsrahmen der vorherigen Artikel erläutert dieser Artikel hauptsächlich die Kettenbewegung, die darin besteht, die Bewegung nach der Bewegung fortzusetzen. Auf vielen Websites wird beispielsweise eine Box angezeigt und

beendet : Beim Erscheinen wird es zunächst breiter und dann höher, beim Austritt wird es zunächst kürzer und dann beim Austritt schmaler! Das vorherige
Modell ist:

startMove(obj, json);

Jetzt ändern zu:

startMove(obj, json, fn);

Das heißt, fn() wird am Ende der ersten Bewegung ausgeführt ; fn ist ein übergebener Parameter. Dieser Parameter ist eine

-Funktion . Nachdem der -Timer bereinigt wurde, führen Sie fn() manuell aus und rufen Sie dann startMove in fn auf (obj, json, fn) und rufen Sie dann startMove(obj, json, fn) im fn im Inneren auf, und Sie können weiterspielen

<!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>

Der endgültige extrahierte perfekte Bewegungsrahmen lautet wie folgt: MotionFrame. js:

Das obige ist der detaillierte Inhalt vonJavaScript-Bewegungsframework – Beispielcode von der Kettenbewegung bis zur perfekten Bewegung (5). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine ausführliche Einführung in mehrwertige Bewegungen im JavaScript-Bewegungsframework (4)Nächster Artikel：Eine ausführliche Einführung in mehrwertige Bewegungen im JavaScript-Bewegungsframework (4)

In Verbindung stehende Artikel

Mehr sehen