jquery实现简单的文本循环滚动
先看效果。
说下原理，利用jqury的scrollTop方法控制滚动条到指定的位置，至于连续无缝滚动是将滚动的内容在初始化时复制一份，用于在滚动到末尾时候衔接，避免出现空白。
代码如下：
<!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>自动滚屏</title>
<style>
body{
margin: 0;
width: 800px;
overflow:hidden;
}
#boxDiv{
height:200px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="boxDiv" style="">
<div id="contentDiv">
1<br/>
2<br/>
3<br/>
4<br/>
5<br/>
6<br/>
7<br/>
8<br/>
9<br/>
10<br/>
11<br/>
12<br/>
13<br/>
14<br/>
15<br/>
16<br/>
17<br/>
18<br/>
========================================================<br/>
</div>
</div>
<script src="https://www.w3school.com.cn//jquery/jquery.js"></script>
<script>
var newTop ;
var div=$("#boxDiv");
var boxHeight=div.height();
var contentHeight=$('#contentDiv').height();
$('#contentDiv').append($('#contentDiv').html());
//使用定时器
var timer = setInterval(function(){
var top=div.scrollTop();
//文本是否已经到底部（底部出现在浏览器窗口中）
if( top>=contentHeight){
console.log(top);
//回到0
div.scrollTop(0);
}else{
//每次在原来的基础上移动
newTop = top;
div.scrollTop(newTop + 1);
}
},10);
</script>
</body>
</html>
