<!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>
