溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“如何用javascript實現不停淡入淡出”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何用javascript實現不停淡入淡出”吧！
實現方法：1、使用querySelector()獲取指定元素對象；2、使用“元素對象.style.opacity = Math.sin(2 * Math.PI * time)”語句來控制淡入或淡出效果；3、使用遞歸的方式實現不停淡入淡出。
本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。
javascript實現不停淡入淡出
只需要找到一個作用域為[0,1]的周期函數。將周期函數的值作為opacity的屬性值即可控制淡入或淡出效果。
利用遞歸即可不停淡入淡出。
實現代碼：
<h2 id="text">床前明月光，疑是地上霜。</h2>
<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實現不停淡入淡出這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
