方法一：向上无缝(可自行修改)
<!DOCTYPE html>
<html>
<head>
<title>向上滚动</title>
</head>
<style>
#marquee li {
height: 30px;
}
</style>
<body>
<div style="height:180px;overflow:hidden;">
<div id="marquee">
<li>
<span>1.新闻1</span>
</li>
<li>
<span>2.新闻1</span>
</li>
<li>
<span>3.新闻1</span>
</li>
<li>
<span>4.中交股份获评多项长江口深水航道治理工程建设先进</span>
</li>
<li>
<span>5.海南省与中交股份将全方位合作</span>
</li>
<li>
<span>6.长江船舶设计院获中国标准创新贡献一等奖</span>
</li>
</div>
</div>
</body>
<script>
window.onload = function () {
scrolldiv();
// 鼠标停留，离开
var marquee = document.getElementById('marquee')
marquee.addEventListener('mouseenter',function(){
window.clearInterval(timename);
})
marquee.addEventListener('mouseleave',function(){
timename = setInterval("doScroll()", 50);
})
}
var offset = 0;
var scrollheight = marquee.offsetHeight;
var length = marquee.children.length;
function scrolldiv() {
不可见处增加同等数量的li元素，模拟无缝连接（实际应该最上面li元素
滚动到不可见之后，删除最上面li元素，再给div末尾添加删除的li元素）
for (var i = 0; i < length - 1; i++) {
var node = marquee.children[i].cloneNode(true);
marquee.appendChild(node);
}
// 执行滚动，利用margin-top
timename = setInterval("doScroll()", 50);
}
function doScroll() {
if (offset == scrollheight) {
offset = 0;
}
marquee.style.marginTop = "-" + offset + "px";
offset += 1;
}
</script>
</html>
方法二:向左且无缝衔接 ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
background: #ccc;
left: 0;
top: 0;
}
.parent .child {
position: absolute;
font-size: medium;
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
right: 0;
width: auto;
white-space: nowrap;
top:50%;
transform:translateY(-50%)
}
</style>
</head>
<body>
<div class="parent">
<div id="scrollText" class="child"></div>
<div id="copyScrollText" class="child"></div>
</div>
<script>
var timer = null
var copyScrollTextTimer = null
var scrollText = null
var copyScrollText = null
scrollText = document.getElementById('scrollText')
在每个标签后面加个\可以换行或者
element.style.whiteSpace = "pre"; 通过\n与css
element.innerHTML = "第一行\n第二行\n第三行";
scrollText.innerHTML = ''<div class="change_plat" id="div_plat">\
<div class="plat">\
<div class="num num_1">\
<p>Microsoft</p>\
<a href="#">XBOX 360</a>\
<a href="#">XBOX ONE</a>\
</div>\
<div class="num num_2">\
<p>PlayStation</p>\
<a href="#">PlayStation 3</a>\
<a href="#">PlayStation 4</a>\
<a href="#">PlayStation Vita</a>\
</div>\
</div>\
</div>''
copyScrollText = document.getElementById('copyScrollText')
copyScrollText.innerHTML = '与scrollText一致，上文只是写一下innerHTML返回html，最好占满全屏'
// 两个div都隐藏到右边，然后拿到数据第一个div开始向左滚动
scrollText.style.right = '-' + scrollText.offsetWidth + 'px' // 将div藏在最右边
copyScrollText.style.right = '-' + copyScrollText.offsetWidth + 'px' // 将div藏在最右边
moveToLeft() // 开始向左移
timer = setInterval(moveToLeft, 20) // 在指定的毫秒数后调用左移函数
// 开始从右往左滚动
function moveToLeft(){
// 当第一个div已经滚到了最左边的时候，重置第一个div, 并清除定时器，因为这个时候第二个div已经在滚动了
if(parseInt(scrollText.style.right) > document.body.clientWidth) {
scrollText.style.right = '-' + scrollText.offsetWidth + 'px'
clearInterval(timer)
}
// 当第一个div开始滚到左边的时候，启动第二个div的滚动，这样才能两个div才能无缝衔接，循环滚动； 这个做加20的判断是因为当文本内容的宽带比当前窗体的宽度还大的时候，让衔接的时候晚一些，这样就能多出一些空白，不至于两次衔接挤在一起
if (scrollText.style.right === (scrollText.offsetWidth > document.body.clientWidth ? 20 : 0 + document.body.clientWidth - scrollText.offsetWidth) + 'px') {
moveCopyScrollTextToLeft()
copyScrollTextTimer = setInterval(moveCopyScrollTextToLeft, 20) // 在指定的毫秒数后调用左移函数
}
scrollText.style.right = parseInt(scrollText.style.right)+1+'px'
}
// 第二个div从右往左滚动
function moveCopyScrollTextToLeft() {
// 当第二个div已经滚到了最左边的时候，重置第二个div, 并清除定时器，因为这个时候第一个div已经在滚动了
if(parseInt(copyScrollText.style.right) > document.body.clientWidth) {
copyScrollText.style.right = '-' + copyScrollText.offsetWidth + 'px'
clearInterval(copyScrollTextTimer)
}
// 当第二个div开始滚到左边的时候，启动第一个div的滚动，这样才能两个div才能无缝衔接，循环滚动; 这个做加20的判断是因为当文本内容的宽带比当前窗体的宽度还大的时候，让衔接的时候晚一些，这样就能多出一些空白，不至于两次衔接挤在一起
if (copyScrollText.style.right === (scrollText.offsetWidth > document.body.clientWidth ? 20 : 0 + document.body.clientWidth - copyScrollText.offsetWidth) + 'px') {
moveToLeft()
timer = setInterval(moveToLeft, 20) // 在指定的毫秒数后调用左移函数
}
copyScrollText.style.right = parseInt(copyScrollText.style.right)+1+'px'
}
window.onbeforeunload = function () {
if (timer) {
clearInterval(timer)
}
if (copyScrollTextTimer) {
clearInterval(copyScrollTextTimer)
}
}
</script>
</body>
</html>