HTML中的QQ滑動效果是一種常用的網頁設計樣式,它可以使頁面呈現出流暢平滑的滑動效果,為用戶帶來更好的視覺體驗。以下是一段QQ滑動效果的代碼示例:
<style> .slide-wrapper { width: 100%; overflow: hidden; } .slide-container { display: flex; transition: transform 0.3s ease; } .slide-item { flex-shrink:0; width: 100%; height: 200px; margin-right: 10px; } .slide-item img { width: 100%; height: 100%; object-fit: cover; } </style> <div class="slide-wrapper"> <div class="slide-container"> <div class="slide-item"><img src="1.jpg" alt=""></div> <div class="slide-item"><img src="2.jpg" alt=""></div> <div class="slide-item"><img src="3.jpg" alt=""></div> </div> </div> <script> let wrapper = document.querySelector('.slide-wrapper'); let container = document.querySelector('.slide-container'); let items = document.querySelectorAll('.slide-item'); let currentIndex = 0; setInterval(() =>{ if (currentIndex === items.length - 1) { currentIndex = 0; } else { currentIndex++; } container.style.transform = `translateX(-${currentIndex}00%)`; }, 3000); </script>
以上代碼中用到的主要技術包括了CSS的flex布局和transform屬性以及JS的定時器函數setInterval。其中,class為slide-item的元素即為需要滑動的圖片項,通過容器的transform屬性不斷改變其translateX值,從而實現滑動效果。此外,JS的setInterval函數可以讓頁面每隔一段時間自動滑動到下一張圖片,使用戶獲得更好的交互體驗。