JavaScriptで連続的なフェードインとフェードアウトを実現する方法

実装方法: 1. querySelector() を使用して指定された要素オブジェクトを取得します; 2. "element object.style.opacity = Math.sin(2 * Math.PI * time)" ステートメントを使用して制御しますフェードインまたはフェードアウト効果; 3. 再帰を使用して、連続的なフェードインおよびフェードアウトを実現します。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

#Javascript は連続的なフェードインとフェードアウトを実装します。

スコープが [0,1] の周期関数を見つけるだけで済みます。 ]。周期関数の値を不透明度の属性値として使用して、フェードインまたはフェードアウト効果を制御します。

再帰を使用してフェードインとフェードアウトを続けます。

実装コード:

<h1 id="床前明月光-疑是地上霜">床前明月光，疑是地上霜。</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 上級チュートリアル ]

以上がJavaScriptで連続的なフェードインとフェードアウトを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。