這篇文章主要講解了“如何用javascript實現(xiàn)不停淡入淡出”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何用javascript實現(xiàn)不停淡入淡出”吧！

成都創(chuàng)新互聯(lián)于2013年成立，先為精河等服務(wù)建站，精河等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為精河企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

實現(xiàn)方法：1、使用querySelector()獲取指定元素對象；2、使用“元素對象.style.opacity = Math.sin(2 * Math.PI * time)”語句來控制淡入或淡出效果；3、使用遞歸的方式實現(xiàn)不停淡入淡出。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

javascript實現(xiàn)不停淡入淡出

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

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

實現(xiàn)代碼：

床前明月光，疑是地上霜。

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實現(xiàn)不停淡入淡出”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何用javascript實現(xiàn)不停淡入淡出這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！