HTML5中的動態效果是指通過一些代碼技巧,在網頁中加入各種動畫、交互和響應效果,使得頁面更加生動和吸引人。下面是一些常用的動態效果代碼示例:
// 點擊按鈕切換圖片 <button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">關閉燈泡</button> <button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">打開燈泡</button> <img id="myImage" src="pic_bulboff.gif"> // 懸浮效果:鼠標懸浮在元素上方時出現文字 <p onmouseover="showText()" onmouseout="hideText()">懸浮出現文字的效果</p> <div id="text" style="display:none">這里是文字內容</div> <script> function showText() { document.getElementById("text").style.display = "block"; } function hideText() { document.getElementById("text").style.display = "none"; } </script> // 動畫效果:平滑滾動到指定位置 <button onclick="scrollToTop()">回到頂部</button> <script> function scrollToTop() { var position = document.documentElement.scrollTop || document.body.scrollTop; if (position >0) { window.requestAnimationFrame(scrollToTop); window.scrollTo(0, position - position / 8); } } </script>
上述代碼展示了三種常見的動態效果,分別是通過點擊按鈕切換圖片、鼠標懸浮出現文字和平滑滾動到指定位置。這些效果都可以通過簡單的代碼實現,讓網頁更加生動和互動,提升用戶體驗。