HTML 旋轉(zhuǎn)相冊代碼可以為網(wǎng)站添加一些特效,使得頁面看起來更加有趣和吸引人。下面就是一個簡單的旋轉(zhuǎn)相冊展示,同時也為大家介紹如何使用 HTML 代碼來實現(xiàn)。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>旋轉(zhuǎn)相冊展示</title> </head> <body> <div class="container"> <div class="card"> <img src="img/1.jpg" alt="image1"> </div> <div class="card"> <img src="img/2.jpg" alt="image2"> </div> <div class="card"> <img src="img/3.jpg" alt="image3"> </div> <div class="card"> <img src="img/4.jpg" alt="image4"> </div> <div class="card"> <img src="img/5.jpg" alt="image5"> </div> <div class="card"> <img src="img/6.jpg" alt="image6"> </div> </div> <!-- JS script --> <script> const cards = document.querySelectorAll('.card'); function rotate() { this.classList.toggle('active'); } cards.forEach(card => card.addEventListener('click', rotate)); </script> </body> </html>
上面的代碼中 container 和 card 兩個 div 標(biāo)簽用于放置照片。通過修改 img 標(biāo)簽的 src 屬性,可以指定展示的照片;而 alt 屬性則用于在無法加載圖片時顯示備選文本。
除此之外,代碼中的 JS script 部分則實現(xiàn)了鼠標(biāo)點擊照片時的翻轉(zhuǎn)效果,從而使得展示更加生動有趣。通過添加 EventListener 監(jiān)聽事件,可以在鼠標(biāo)點擊時觸發(fā) rotate() 函數(shù),進(jìn)而調(diào)用 classList.togggle() 方法實現(xiàn)翻轉(zhuǎn)效果。
總之,HTML 旋轉(zhuǎn)相冊代碼可以讓網(wǎng)站更加美觀和有趣,同時也可以幫助我們更好地理解 HTML 和 JavaScript 的運作方式。