So erreichen Sie ein kontinuierliches Ein- und Ausblenden in Javascript

Implementierungsmethode: 1. Verwenden Sie querySelector(), um das angegebene Elementobjekt abzurufen. 2. Verwenden Sie die Anweisung „element object.style.opacity = Math.sin(2 * Math.PI * time)“, um das Einblenden zu steuern oder Ausblendeffekt; 3. Verwenden Sie Rekursion zum Ein- und Ausblenden.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Javascript implementiert kontinuierliches Ein- und Ausblenden

Sie müssen nur eine periodische Funktion mit einem Umfang von [0,1] finden. Verwenden Sie den Wert der periodischen Funktion als Attributwert der Deckkraft, um den Ein- oder Ausblendeffekt zu steuern.

Verwenden Sie Rekursion, um immer wieder ein- und auszublenden.

Implementierungscode:

<h1 id="text">床前明月光，疑是地上霜。</h1>
<script type="text/javascript">
var duration = 3000;
var startTime = new Date();
var p = 0;
requestAnimationFrame(function f(){
  //获取到元素
  var el = document.querySelector("#text");

  var time = ( new Date - startTime ) / duration;
  el.style.opacity = Math.sin(2 * Math.PI * time);
  requestAnimationFrame(f);
});

Rendering:

[Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene]

Das obige ist der detaillierte Inhalt vonSo erreichen Sie ein kontinuierliches Ein- und Ausblenden in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!