자바스크립트에서 연속 페이드인 및 페이드아웃을 구현하는 방법

구현 방법: 1. querySelector()를 사용하여 지정된 요소 객체를 얻습니다. 2. "element object.style.opacity = Math.sin(2 * Math.PI * time)" 문을 사용하여 페이드인을 제어합니다. 또는 페이드 아웃 효과; 3. 재귀를 사용하여 페이드 인 및 아웃합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

Javascript는 연속 페이드인 및 페이드아웃을 구현합니다

범위가 [0,1]인 주기 함수만 찾으면 됩니다. 페이드 인 또는 페이드 아웃 효과를 제어하려면 주기 함수 값을 불투명도 속성 값으로 사용하십시오.

재귀를 사용하여 페이드 인 및 페이드 아웃을 계속하세요.

구현 코드:

<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);
});

렌더링:

[추천 학습: javascript 고급 튜토리얼]

위 내용은 자바스크립트에서 연속 페이드인 및 페이드아웃을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!