實現(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)代碼：

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

效果圖：

【推薦學(xué)習(xí)：javascript高級教程】