js 無縫滾動
阿新 • • 發佈：2021-06-21
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="content"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> <style type="text/css"> * { margin:0; padding:0; list-style:none; float:left} #content { width:200px; height:500px; position:relative; overflow:hidden } #content ul { width:100%; position:absolute } #content ul li { width:200px; height:100px; }#content ul li:nth-of-type(1) { background:yellow } #content ul li:nth-of-type(2) { background:turquoise } #content ul li:nth-of-type(3) { background:navajowhite } #content ul li:nth-of-type(4) { background:blueviolet } #content ul li:nth-of-type(5) { background:red } #content ul li:nth-of-type(6) { background:yellow } #content ul li:nth-of-type(7) { background:turquoise } #content ul li:nth-of-type(8) { background:navajowhite } #content ul li:nth-of-type(9) { background:blueviolet } #content ul li:nth-of-type(10) { background:red } </style> <script type="text/javascript"> window.onload = function() { var content = document.getElementById("content") var ul = content.getElementsByTagName("ul")[0] var li = ul.getElementsByTagName("li") var speed = 1; ul.innerHTML += ul.innerHTML // ul.style.height = li.length * li[0].offsetHeight + "px" function run() { if (ul.offsetTop < -ul.offsetHeight / 2) { ul.style.top = 0 } else if (ul.offsetTop > 0) { ul.style.top = -ul.offsetHeight / 2 + "px" } ul.style.top = ul.offsetTop + speed + "px"; timer = requestAnimationFrame(run); } timer = requestAnimationFrame(run); content.onmouseover = function() { cancelAnimationFrame(timer); } content.onmouseout = function() { timer = requestAnimationFrame(run); } } </script> </html>