HTML5中的JS特效代碼 HTML5是一種新的標記語言，用于編寫網頁和應用程序。隨著時間的推移，它已經成為Web開發的一種主要技術。而JS, 簡稱JavaScript, 是一種用于開發交互式效果和動態效果的編程語言。在HTML5中，JS可以用于創建各種特效和動畫，從而提高用戶的體驗。下面是一些常用的HTML5中JS特效代碼。 1. 圖片輪播效果

//HTML
<div class="slider">
<img src="img1.jpg" alt="Image 1">
<img src="img2.jpg" alt="Image 2">
<img src="img3.jpg" alt="Image 3">
</div>
//JS
var slider = document.querySelector('.slider');
var images = slider.querySelectorAll('img');
var currentIndex = 0;
function showNextImage() {
images[currentIndex].classList.remove('show');
currentIndex = (currentIndex + 1) % images.length;
images[currentIndex].classList.add('show');
}
setInterval(showNextImage, 5000);

2. 頁面滾動效果

//HTML
<button onclick="scrollToTop()">Top</button>
<div style="height:2000px"></div>
//JS
function scrollToTop() {
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
if (currentScroll >0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, currentScroll - (currentScroll / 20));
}
}

3. 下拉菜單效果

//HTML
<div class="dropdown">
<button onclick="toggleDropdown()">Menu</button>
<ul class="dropdown-menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
//JS
function toggleDropdown() {
var dropdownMenu = document.querySelector('.dropdown-menu');
dropdownMenu.classList.toggle('show');
}

4. 鍵盤事件效果

//HTML
<div>Press any key</div>
//JS
document.addEventListener('keydown', function(event) {
var info = document.querySelector('div');
info.textContent = 'You pressed ' + event.key;
});

總結 以上是HTML5中常用的JS特效代碼，這些代碼可以讓我們創建出更加豐富的動態效果，提升頁面的用戶體驗。對于Web開發者來說，了解如何創建這些效果將非常有幫助。