Beispielerklärung basierend auf der gleichmäßigen Bewegung von js

Dieser Artikel enthält hauptsächlich eine Beispielerklärung basierend auf einer gleichmäßigen Bewegung (Seitenleiste, Ein- und Ausblenden). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Wie bewegt man ein Element (z. B. p) in JavaScript?

Legen Sie den Grundstil fest und achten Sie darauf, das p zu positionieren (natürlich können Sie auch Randänderungen verwenden, um Bewegungseffekte für Elemente zu erzeugen);

<style>
    p {
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      left: 0px;
    }
</style>

Grundstruktur:

   <input type="button" value="动起来"/>
   <p id="box"></p>

Wenn wir auf diese Schaltfläche klicken, um p zu bewegen, müssen wir tatsächlich dafür sorgen, dass sich der linke Wert von p weiter ändert. Dann hat p einen Bewegungseffekt. Wir lassen zuerst die linke Änderung zu und lassen dann zu es ändert sich weiter

window.onload = function(){
    var oBtn = document.querySelector( "input" ),
      oBox = document.querySelector( '#box' );
    oBtn.onclick = function(){
      oBox.style.left = oBox.offsetLeft + 10 + 'px';
    }
  }

Dann wird jedes Mal, wenn ich auf die Schaltfläche klicke, der linke Wert von p um 10 Pixel zum ursprünglichen Wert addiert. Hier können Sie auch die Methode zum Erhalten des Nicht-Interline-Stils verwenden, um den Wert von left plus 10px zu erhalten, und Sie können auch den Effekt erzielen:

function css(obj, attr) {
  if (obj.currentStyle) {
    return obj.currentStyle[attr];
  } else {
    return getComputedStyle(obj, false)[attr];
  }
}
window.onload = function () {
  var oBtn = document.querySelector("input"),
    oBox = document.querySelector('#box');
  oBtn.onclick = function () {
    oBox.style.left = parseInt( css( oBox, 'left' ) ) + 10 + 'px';
  }
}

offsetLeft Was ist der Unterschied zwischen dem Erhalten des Werts von Nicht-Interline-Stil übrig?

offsetLeft hat keine px-Einheit, aber left hat eine px-Einheit

oBtn.onclick = function () {
    // alert( css( oBox, 'left' ) ); //0px
    alert( oBox.offsetLeft ); //0
  }

Jetzt wird p angeklickt, um es weiter zu verschieben Es? Fügen Sie einen Timer hinzu

  oBtn.onclick = function () {
    setInterval( function(){
      oBox.style.left = oBox.offsetLeft + 10 + 'px';
    }, 1000 / 16 );
  }

Wenn wir auf die Schaltfläche klicken, bewegt sich p weiter nach links. Wie stoppe ich es? Das Anhalten erfordert definitiv Bedingungen. Zum Beispiel bitten wir ihn, anzuhalten, wenn er 500 Pixel erreicht. Auf diese Weise können wir p bei 500 Pixel anhalten lassen. Wenn wir hier die Schrittlänge auf 10 setzen, ändern wir sie 7 oder 8, und Sie werden feststellen, dass Sie nicht aufhören können. Warum? Weil die Beurteilungsbedingung von 500px übersprungen wird

var timer = null;
  oBtn.onclick = function () {
    timer = setInterval( function(){
      if ( oBox.offsetLeft == 500 ) {
        clearInterval( timer );
      }else {
        oBox.style.left = oBox.offsetLeft + 10 + 'px';
      }
    }, 1000 / 16 );
  }

0, 7, 14, 21 .... 280, 287, 294, 301, ... 490, 497, 504. Sie wird von 497 bis 504 übersprungen 500px, also kann p nicht aufhören, was soll ich tun? Ändern Sie einfach die Beurteilungsbedingung.

Ändern Sie die Bedingung auf >=500, um den Timer zu löschen, und fügen Sie außerdem diesen Code oBox.style.left = 500 + 'px' hinzu, damit dies erzwungen wird Stoppen Sie bei 500 Pixel, sonst stoppt p nicht bei 500 Pixel, sondern bei 504 Pixel. Wenn Sie während der Bewegung von p weiter auf die Schaltfläche klicken, werden Sie feststellen, dass p jedes Mal zu beschleunigen beginnt ? Dies liegt daran, dass jedes Mal, wenn Sie auf eine Schaltfläche klicken, ein Timer aktiviert wird und jedes Mal, wenn Sie auf eine Schaltfläche klicken, ein Timer aktiviert wird. Auf diese Weise werden mehrere Timer überlagert und auch die Geschwindigkeit wird überlagert, sodass p beginnt zu beschleunigen, dann müssen wir eine Geschwindigkeit von 10 Pixel beibehalten, was bedeutet, dass sich der Timer nicht überschneidet. Was ist zu tun?

oBtn.onclick = function () {
  timer = setInterval( function(){
    if ( oBox.offsetLeft >= 500 ) {
      oBox.style.left = 500 + 'px';
      clearInterval( timer );
    }else {
      oBox.style.left = oBox.offsetLeft + 7 + 'px';
    }
  }, 1000 / 16 );
}

Sie müssen nur den vorherigen Timer jedes Mal löschen, wenn Sie auf die Schaltfläche klicken, um sicherzustellen, dass ein Timer immer eingeschaltet ist. An diesem Punkt ist eine grundlegendste einheitliche Bewegungsstruktur abgeschlossen, dann wir kann es in eine Funktion kapseln

oBtn.onclick = function () {
  clearInterval( timer );
  timer = setInterval( function(){
    if ( oBox.offsetLeft >= 500 ) {
      oBox.style.left = 500 + 'px';
      clearInterval( timer );
    }else {
      oBox.style.left = oBox.offsetLeft + 7 + 'px';
    }
  }, 1000 / 16 );
}

Nachdem wir diese Funktion haben, erstellen wir eine kleine Anwendung.

    function animate(obj, target, speed) {
        clearInterval(timer);
        timer = setInterval(function () {
          if (obj.offsetLeft == target) {
            clearInterval(timer);
          } else {
            obj.style.left = obj.offsetLeft + speed + 'px';
          }
        }, 30);
      }

http://www.jiathis.com/getcode

Wenn Sie diese Website öffnen, werden Sie feststellen, dass es auf der rechten Seite einen Seitenleisteneffekt gibt (diesen Spezialeffekt teilen). ist auf der Website im Allgemeinen sehr beliebt

Ein weiterer Fade-Effekt:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>侧边栏 - by ghostwu</title>
  <style>
    #box {
      width: 150px;
      height: 300px;
      background: red;
      position: absolute;
      left: -150px;
      top: 50px;
    }

    #box p {
      width: 28px;
      height: 100px;
      position: absolute;
      right: -28px;
      top: 100px;
      background: green;
    }
  </style>
  <script>
    window.onload = function () {
      var timer = null;
      var oBox = document.getElementById("box");
      oBox.onmouseover = function () {
        animate(this, 0, 10);
      }
      oBox.onmouseout = function () {
        animate(this, -150, -10);
      }
      function animate(obj, target, speed) {
        clearInterval(timer);
        timer = setInterval(function () {
          if (obj.offsetLeft == target) {
            clearInterval(timer);
          } else {
            obj.style.left = obj.offsetLeft + speed + 'px';
          }
        }, 30);
      }
    }
  </script>
</head>
<body>
<p id="box">
  <p>分享到</p>
</p>
</body>
</html>

Wenn die Maus bewegt wird Nach oben wird die Transparenz zu 1

Verwandte Empfehlungen:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>淡入淡出 - by ghostwu</title>
  <style>
    img {
      border: none;
      opacity: 0.3;
      filter: alpha(opacity:30);
    }
  </style>
  <script>
    window.onload = function () {
      var timer = null;
      var oImg = document.getElementById("img");
      oImg.onmouseover = function(){
        animate( this, 100, 10 );
      }
      oImg.onmouseout = function(){
        animate( this, 30, -10 );
      }
      //alpha=30 --> 100
      function animate(obj, target, speed) {
        clearInterval(timer);
        var cur = 0;
        timer = setInterval(function () {
          cur = css( obj, 'opacity') * 100;
          if( cur == target ){
            clearInterval( timer );
          }else {
            cur += speed;
            obj.style.opacity = cur / 100;
            obj.style.filter = "alpha(opacity:" + cur + ")";
          }
        }, 30);
      }

      function css(obj, attr) {
        if (obj.currentStyle) {
          return obj.currentStyle[attr];
        } else {
          return getComputedStyle(obj, false)[attr];
        }
      }
    }
  </script>
</head>
<body>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>

So verwenden Sie HTML5-Canvas, um eine gleichmäßige Bewegung zu erzielen

Verwenden Sie js, um die Schrittgröße anzugeben, um eine gleichmäßige Bewegung in eine Richtung zu erreichen

JS-Codebeispiel, um einheitliche Bewegungs_Javascript-Fähigkeiten zu erreichen

Das obige ist der detaillierte Inhalt vonBeispielerklärung basierend auf der gleichmäßigen Bewegung von js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!