需求描述
接到的需求是这样的：跑马灯效果 一次展示一行文字 循环滚动 文字滚动到视野中停留一秒后滚出。
静态效果如下图，文字从下往上或者从右往左滚动，滚动到此位置时停留一秒（不会传动图...
网络上有比较多的多行文字循环滚动的demo,找了一下好像能满足单行并且可停留一秒的比较少（emmm可能我没认真找
下面贴出我的最终解决方案。
解决方案
垂直方向滚动
使用一个定时器 不断改变最外层div的scrollTop，为了能循环滚动，增加一个与con1一样的con2
PS：这里的time选用1000/60是因为想要模拟window.requestAnimationFrame(一般1000ms60帧，当然了，你也可以直接使用requestAnimationFrame代替setInterval，效果更好
<!DOCTYPE html>
<html>
<head>
<title>单行文字垂直跑马灯效果</title>
<style type="text/css">
ul,li{
list-style:none;
display:block;
margin: 0;
padding: 0;
}
#loop-show-box {
width: 300px;
height: 25px;
line-height: 25px;
background: red;
position: absolute;
top: 0;
left: 0;
right: 0;
overflow: hidden;
}
.li-style {
width: 100%;
height: 25px;
text-align: center;
}
</style>
</head>
<body>
<div id="loop-show-box">
<ul id="con1">
<li class="li-style">测试1号</li>
<li class="li-style">测试2号</li>
<li class="li-style">测试3号</li>
<li class="li-style">测试4号</li>
</ul>
<ul id="con2"></ul>
</div>
<script type="text/javascript">
var area = document.getElementById('loop-show-box');
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
var mytimer1 = null;
var mytimer = null;
var time = 1000 / 60;
con2.innerHTML = con1.innerHTML;
function scrollUp () {
if (area.scrollTop >= con1.offsetHeight) {
area.scrollTop = 0;
} else {
if (area.scrollTop % 25 == 0) {
clearInterval(mytimer);
clearInterval(mytimer1);
mytimer1 = setTimeout(function () {
mytimer = setInterval(scrollUp, time);
}, 1000);
}
area.scrollTop++;
}
}
mytimer = setInterval(scrollUp, time);
</script>
</body>
</html>水平方向滚动
水平方法滚动的具体实现其实跟垂直方向类似的，不同的是要改变的是容器的scrollLeft
<!DOCTYPE html>
<html>
<head>
<title>单行文字水平跑马灯效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container {
width: 400px;
height: 25px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin: 100px auto;
}
.icon {
width: 15px;
margin-right: 15px;
}
#loop-show-box {
width: 300px;
height: 25px;
line-height: 25px;
background: red;
overflow: auto;
white-space: nowrap;
}
.li-style {
width: 300px;
height: 25px;
text-align: left;
/*使用inline-block的时候两个item之间会存在间距（当然了你可以把它们写在一行以去除这样的间距*/
display: inline-flex;
}
#con1,#con2 {
display: inline-flex;
}
</style>
</head>
<body>
<div class="container">
<img src="img/horn.png" class="icon">
<div id="loop-show-box">
<div id="con1">
<div class="li-style">测试1号</div>
<div class="li-style">测试2号</div>
<div class="li-style">测试3号</div>
<div class="li-style">测试4号</div>
<div class="li-style">测试5号</div>
<div class="li-style">测试6号</div>
</div>
<div id="con2"></div>
</div>
</div>
<script type="text/javascript">
var area = document.getElementById('loop-show-box');
var con1 = document.getElementById('con1');
var con2 = document.getElementById('con2');
var mytimer1 = null;
var mytimer = null;
var time = 1000 / 60;
con2.innerHTML = con1.innerHTML;
function scrollUp () {
if (area.scrollLeft >= con1.offsetWidth) {
area.scrollLeft = 0;
} else {
// 可根据想要的速度调节步长
area.scrollLeft += 2;
if (area.scrollLeft % 300 == 0) {
clearInterval(mytimer);
clearInterval(mytimer1);
mytimer1 = setTimeout(function () {
mytimer = setInterval(scrollUp, time);
}, 1000);
}
}
}
mytimer1 = setTimeout(function () {
mytimer = setInterval(scrollUp, time);
}, 1000)
</script>
</body>
</html>
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。