- js+css实现单行数据无缝滚动
- 工作遇到需求:很多条数据可以一条一条向上滚.
<!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> ???* { ?????margin: 0; ?????padding: 0 ???} ???#box { ?????height: 140px; ?????width: 400px; ?????border: 1px solid #cccccc; ?????color: hotpink; ?????overflow: hidden; ?????margin: 50px auto; ?????text-align: center; ???} ?</style></head><body> ?<div id="box"> ???<ul id="ul1"> ?????<li>1111111111111111111111</li> ?????<li>2222222222222222222222</li> ?????<li>3333333333333333333333</li> ?????<li>4444444444444444444444</li> ?????<li>5555555555555555555555</li> ?????<li>6666666666666666666666</li> ?????<li>7777777777777777777777</li> ?????<li>8888888888888888888888</li> ?????<li>9999999999999999999999</li> ???</ul> ???<ul id="ul2"></ul> ?</div> ?<script> ???window.onload = roll(50); ???// 传入的 t 为滚动快慢的时间 ???function roll(t) { ???????console.log(1); ???????let ul1 = document.getElementById("ul1"); ?????let ul2 = document.getElementById("ul2"); ?????let box = document.getElementById("box"); ?????ul2.innerHTML = ul1.innerHTML; ?????// 初始化滚动高度 ?????box.scrollTop = 0; ?????let timer = setInterval(rollStart, t); ????????box.onmouseover = function () { ??????????clearInterval(timer) ????????} ????????box.onmouseout = function () { ??????????timer = setInterval(rollStart, t); ??????} ???} ???function rollStart() { ???????if (box.scrollTop >= ul1.scrollHeight) { ???????box.scrollTop = 0; ?????} else { ???????box.scrollTop++; ?????} ???} ?</script></body></html>
js实现无缝滚动
原文地址：https://www.cnblogs.com/xiaoyun1121/p/9285196.html