js 無限循環垂直滾動列表 · 小糜學習筆記之前端篇

~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; list-style: none; } #ul { position: relative; top: 0px; left: 0px; } li { width: 200px; height: 100px; margin: 10px; background-color: #f00; color: #fff; text-align: center; font-size: 60px; transition: all 0.3s ease-out; } </style> </head> <body> <div style="height: 300px;overflow: hidden;"> <ul id="ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </div> <button id="start">走起來</button> <button id="reset">復位</button> <script> const ul = document.getElementById('ul') const start = document.getElementById('start') const reset = document.getElementById('reset') let timerId start.onclick = () => { if(timerId) return timerId = setInterval(() => { const firstLi = document.querySelector('#ul li:first-child') ul.style.transition = 'all 0.5s ease-out' firstLi.style.opacity = 0 ul.style.top = -110 + 'px' setTimeout(() => { firstLi.removeAttribute('style') // 模擬隨機添加數據 // const count = Math.random() * 10 // for(let i = count; i >0; i--) { // ul.appendChild(firstLi.cloneNode(true)) // } ul.appendChild(firstLi) ul.style.transition = '' ul.style.top = 0 }, 500) }, 2000) } reset.onclick = () => { clearInterval(timerId) timerId = undefined location.reload() } </script> </body> </html> ~~~