HTML5中跑馬燈是一項簡單而實用的功能,可以用于展示滾動文字、圖片、廣告等內容,為用戶提供更好的觀看體驗。下面是HTML5中跑馬燈的代碼大全:
<!-- 文字跑馬燈 --> <marquee>這是一個簡單的文字跑馬燈</marquee> <!-- 圖片跑馬燈 --> <marquee> <img src="圖片1.jpg" /> <img src="圖片2.jpg" /> <img src="圖片3.jpg" /> </marquee> <!-- 無限循環滾動文字 --> <div class="scroll-text"> <p>這是滾動文字1</p> <p>這是滾動文字2</p> <p>這是滾動文字3</p> </div> <!-- 有限次數循環滾動文字 --> <div class="scroll-text"> <p>這是滾動文字1</p> <p>這是滾動文字2</p> <p>這是滾動文字3</p> </div> <script> var scrollDiv = document.querySelector(".scroll-text"); var scrollP = scrollDiv.querySelectorAll("p"); var i = 0; var timer = setInterval(function() { if (i < scrollP.length) { scrollDiv.scrollTop += scrollP[i].offsetHeight; i++; } else { i = 0; clearInterval(timer); } }, 2000); </script>
以上是HTML5中跑馬燈的常見代碼,其中包括文字跑馬燈、圖片跑馬燈、無限循環滾動文字、有限次數循環滾動文字等多種實現方式,可以根據需要選擇適合自己的方式進行展示。
上一篇mysql中改密碼怎么改
下一篇html5中設置鏈接