在该笔记中将学到列表展示中信息滚动效果的方法与展示效果
本系列的是参考慕课网 vivian老师的视频，仅供个人查阅使用，具体讲解推荐参考视频。
原来 HTML 中提供了一个专门用来做信息滚动的标签叫 marquee，但是这个标签将要被禁止使用了，所以不建议继续使用这个标签做信息滚动。
无缝滚动的制作
无缝滚动的原理：想要实现内容的无缝滚动，可以在显示内容下面再拷贝一次显示内容，即有两个包含相同内容的容器实现滚动的衔接，就可以实现无缝滚动的效果。
制作效果如下：
参考代码如下：
<html>
<head>
<title>滚动效果制作</title>
<meta charset="utf-8 ">
<style type="text/css">
*{margin: 0;padding: 0;}
.wrap{border: 1px solid #ccc;width: 300px;height: 100px;margin: 100px auto;overflow: hidden;font-size: 12px;}
.wrap ul{margin-left: 40px;list-style: none;}
.wrap li{margin: 5px;}
</style>
<script>
window.onload = function(){
let col1 = document.getElementById("col1");
let col2 = document.getElementById("col2");
let scrollWrap = document.getElementById("scroll-wrap");
col2.innerHTML = col1.innerHTML;
let tmp = setInterval(function(){
if(scrollWrap.scrollTop >= col1.scrollHeight){
scrollWrap.scrollTop = 0;
}
scrollWrap.scrollTop++;
}, 50);
scrollWrap.onmouseover = function(){
clearInterval(tmp);
}
scrollWrap.onmouseout =function(){
tmp = setInterval(function(){
if(scrollWrap.scrollTop >= col1.scrollHeight){
scrollWrap.scrollTop = 0;
}
scrollWrap.scrollTop++;
}, 50);
}
}
</script>
</head>
<body>
<div class="wrap" id="scroll-wrap">
<ul id="col1">
<li>这是滚动展示第一行</li>
<li>这是滚动展示第二行</li>
<li>这是滚动展示第三行</li>
<li>这是滚动展示第四行</li>
<li>这是滚动展示第五行</li>
<li>这是滚动展示第六行</li>
<li>这是滚动展示第七行</li>
</ul>
<ul id="col2">
</ul>
</div>
</body>
</html>
间歇滚动的制作
实现效果：当滚动条中有多个信息进行滚动时，间歇滚动可以每滚动过一条信息以后，停留一段时间，然后再滚动过下一条信息。
实现方法：每次完成一次滚动以后，使用 setTimeout 激活下一次滚动。
<html>
<head>
<title>滚动效果制作</title>
<meta charset="utf-8 ">
<style type="text/css">
*{margin: 0;padding: 0;}
.wrap{border: 1px solid #ccc;width: 300px;height: 100px;margin: 100px auto;overflow: hidden;font-size: 12px;}
.wrap ul{margin-left: 40px;list-style: none;}
.wrap li{height: 20px;line-height: 20px;display: block;}
</style>
<script>
window.onload = function(){
let col1 = document.getElementById("col1");
let col2 = document.getElementById("col2");
let scrollWrap = document.getElementById("scroll-wrap");
col2.innerHTML = col1.innerHTML;
scrollWrap.scrollTop = 0;
let tmp;
function scrollOneRow(){
tmp = setInterval(function(){
scrollWrap.scrollTop++;
console.log(scrollWrap.scrollTop)
if(parseInt(scrollWrap.scrollTop) % 20 == 0) {
clearInterval(tmp);
setTimeout(startMove, 2000);
}else{
if(scrollWrap.scrollTop >= col1.scrollHeight){
scrollWrap.scrollTop = 0;
}
}
}, 100);
}
function startMove(){
scrollOneRow();
}
scrollWrap.onmouseover = function(){
clearInterval(tmp);
}
scrollWrap.onmouseout = function(event){
if(event.target.tagName.toLowerCase() == "div") {
startMove();
}
};
startMove();
}
</script>
</head>
<body>
<div class="wrap" id="scroll-wrap">
<ul id="col1">
<li>这是滚动展示第一行</li>
<li>这是滚动展示第二行</li>
<li>这是滚动展示第三行</li>
<li>这是滚动展示第四行</li>
<li>这是滚动展示第五行</li>
<li>这是滚动展示第六行</li>
<li>这是滚动展示第七行</li>
</ul>
<ul id="col2">
</ul>
</div>
</body>
</html>