javascript怎麼實現不停淡入淡出

實作方法：1、使用querySelector()取得指定元素物件；2、使用「元素物件.style.opacity = Math.sin(2 * Math.PI * time)」語句來控制淡入或淡出效果；3、使用遞歸的方式實現不停淡入淡出。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

javascript實作不停淡入淡出

只需要找到一個作用域為[0,1]的週期函數。將週期函數的值作為opacity的屬性值即可控制淡入或淡出效果。

利用遞迴即可不停淡入淡出。

實作程式碼：

<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高階教程】

以上是javascript怎麼實現不停淡入淡出的詳細內容。更多資訊請關注PHP中文網其他相關文章！