<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet"><title>滚动文字</title><style>* {margin: 0;padding: 0;}ul,li {list-style: none;display: block;}#scrollBox {height: 150px;width: 300px;margin: 100px auto;background: red;overflow: hidden;color: #fff;}#scrollBox #con1,#con2 {width: 280px;float: left;}#scrollBox li {height: 15px;line-height: 15px;text-align: center;margin-bottom: 15px}</style> </head><body><div id="scrollBox"><ul id="con1"><li> 1、浓雾 犹如波纹般散开</li><li> 2、我多像是 一颗粒子醒来</li><li> 3、无止境的水域</li><li> 4、旋转在其中的银河</li><li> 5、只留下了一道沉默的白</li><li> 6、四周 是否从未有谁在</li></ul><ul id="con2"></ul></div><script>var box = document.getElementById("scrollBox");var con1 = document.getElementById("con1");var con2 = document.getElementById("con2");con2.innerHTML = con1.innerHTML;var liLen = con1.getElementsByTagName('li');console.log('liLen ', liLen);console.log('liLen ', liLen.length);function scrollUp() {if (box.scrollTop >= con1.offsetHeight) {box.scrollTop = 0;} else {box.scrollTop++;}}// 大于6条数据 开始滚动if (liLen.length > 5) {var time = 50;var mytimer = setInterval(scrollUp, time);box.onmouseover = function () {clearInterval(mytimer);};box.onmouseout = function () {mytimer = setInterval(scrollUp, time);};}</script> </body></html>
