Bagaimana untuk mencapai fade-in dan fade-out berterusan dalam javascript

Kaedah pelaksanaan: 1. Gunakan querySelector() untuk mendapatkan objek elemen yang ditentukan; 2. Gunakan pernyataan "elemen object.style.opacity = Math.sin(2 * Math.PI * time)" untuk mengawal Kesan fade-in atau fade-out; 3. Gunakan rekursi untuk mencapai fade-in dan fade-out berterusan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi JavaScript 1.8.5, komputer Dell G3.

Javascript melaksanakan fade in dan out berterusan

Anda hanya perlu mencari fungsi berkala dengan skop [0,1 ]. Gunakan nilai fungsi berkala sebagai nilai atribut kelegapan untuk mengawal kesan fade-in atau fade-out.

Gunakan rekursi untuk pudar masuk dan keluar.

Kod pelaksanaan:

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

[Pembelajaran yang disyorkan: javascript Advanced Tutorial】

Atas ialah kandungan terperinci Bagaimana untuk mencapai fade-in dan fade-out berterusan dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!