原生js实现marquee向上/向左无缝滚动，鼠标移入暂停效果！

上篇我们html原生的marquee滚动的用法及缺点：就是滚动的时候空间留白过多，无法消除。所以我们，实际场景我们还是要用js打造出无缝滚动的marquee的插件。这篇文字总结了我最近开发的时候遇到的两种滚动效果：向左/向上。毕竟90%的时候都是这两种效果，向下和向右我几乎没有见到过。

marquee向上无缝滚动

我们先来看看向上滚动的marquee效果：

滚动原理：——注意整体滚动部分是父级盒子

1.复制内容，做第二次滚动的内容，当第一次到边界的时候，第二次滚动接上去，实现无缝拼接的效果；
2.计数器部分，通过判断父级的scrollTop滚动位置是否大于第一个子盒子的可滚动高度scrollHeight，不满足条件的话，父级的scrollTop滚动位置就每次增加，实现向上循环滚动；满足条件的话，将父级的scrollTop滚动位置调到起始位置0。
3.鼠标移入效果，通过onmouseenter监听鼠标移入，然后清除计数器，将marquee暂停滚动；通过onmouseleave监听鼠标移出事件，递归调用计数器函数，恢复marquee的滚动事件。

代码部分

1.html

<div class="marquee" id="parent">
<ul id="list">
<li>
<h4 class="title">滚动标题</h4>
<div class="course-list f16">
<p><a href="" target="_blank">前端知识体系</a></p>
<p><a href="" target="_blank">前端知识结构</a></p>
<p><a href="" target="_blank">Web前端开发大系概览</a></p>
<p><a href="" target="_blank">Web前端开发大系概览-中文版</a></p>
<p><a href="" target="_blank">Web Front-end Stack v2.2</a></p>
<p><a href="" target="_blank">前端书籍</a></p>
<p><a href="" target="_blank">前端免费书籍大全</a></p>
</div>
</li>
<li>
<h4 class="title">测试标题1</h4>
<div class="course-list f16">
<p><a href="" target="_blank">前端入门教程</a></p>
<p><a href="" target="_blank">瘳雪峰的Javascript教程</a></p>
<p><a href="" target="_blank">jQuery基础教程</a></p>
<p><a href="" target="_blank">前端工程师必备的PS技能——切图篇</a></p>
<p><a href="" target="_blank">结合个人经历总结的前端入门方法</a></p>
</div>
</li>
<li>
<h4 class="title">测试标题2</h4>
<div class="course-list f16">
    <p><a href="" target="_blank">css sprite 雪碧图制作</a></p>
      <p><a href="" target="_blank">版本控制入门 – 搬进 Github</a></p>
<p><a href="" target="_blank">Grunt-beginner前端自动化工具</a></p>
</div>
</li>
</ul>
<ul id="list1"></ul>
</div>

2.css

<style type="text/css">
  .marquee{width: 300px;height: 200px;overflow: hidden;border: 1px solid #ddd;}
</style>

3.js

marqueeUp("parent","list","list1",40)
function marqueeUp(a,b,c,d){
let parent = document.getElementById(a);
let child1 = document.getElementById(b);
let child2 = document.getElementById(c);
child2.innerHTML = child1.innerHTML;
let timer = setInterval(function() {
if(parent.scrollTop >= child1.scrollHeight) {
   parent.scrollTop = 0;
} else {
   parent.scrollTop++;
}
}, d);
parent.onmouseenter = function() {
clearTimeout(timer)
}
parent.onmouseleave = function() {
marqueeUp("parent","list","list1",40)
}
}

这样就实现了marquee无缝向上滚动的js效果，在线体验：https://course.51qux.com/effect/marquee-js

marquee向左无缝滚动

向左滚动的原理除了第二部分逻辑判断外，都和向上的一样，一起来康康！

原理部分：

1.复制内容，做第二次滚动的内容，当第一次到边界的时候，第二次滚动接上去，实现无缝拼接的效果；
2.计数器部分，通过判断父级的scrollLeft向左滚动的距离是否大于子盒子的内容宽度offsetWidth，不满足条件的话，父级的scrollLeft滚动位置就每次增加，实现向左循环滚动；满足条件的话，将父级的scrollLeft滚动位置调到起始位置0。
3.鼠标移入效果，通过onmouseenter监听鼠标移入，然后清除计数器，将marquee暂停滚动；通过onmouseleave监听鼠标移出事件，递归调用计数器函数，恢复marquee的滚动事件。

代码部分：

1.html

<div class="marqueeLeft" id="leftParent">
<ul id="listLeft">
<li><img src="../img/1.jpg" alt=""/></li>
<li><img src="../img/2.jpg" alt=""/></li>
<li><img src="../img/3.jpg" alt=""/></li>
<li><img src="../img/4.jpg" alt=""/></li>
<li><img src="../img/5.jpg" alt=""/></li>
</ul>
<ul id="listLeft1"></ul>
</div>

2.css

<style type="text/css">
  .marqueeLeft{width: 1000px;height: 200px;overflow: hidden;}
  .marqueeLeft ul{white-space: nowrap;}
  .marqueeLeft ul li{display: inline-block;}
</style>

3.js部分

marqueeLeft("leftParent","listLeft","listLeft1",40)
function marqueeLeft(a,b,c,d){
let parent = document.getElementById(a);
let child1 = document.getElementById(b);
let child2 = document.getElementById(c);
child2.innerHTML = child1.innerHTML;
let timer = setInterval(function() {
if(child2.offsetWidth-parent.scrollLeft<=0)
parent.scrollLeft-=child1.offsetWidth
else{
parent.scrollLeft++;
}
}, d);
parent.onmouseenter = function() {
clearTimeout(timer)
}
parent.onmouseleave = function() {
marqueeLeft("leftParent","listLeft","listLeft1",40)
}
}

这样就实现了marquee向左无缝滚动的效果，在线预览：https://course.51qux.com/marquee-js

整体来说，实现起来并不难，主要是其原理搞清楚，逻辑部分比较重要，可以试试练习一下向右和向下滚动的写法。其实网上有很多无缝滚动的案例，我也是学了其原理，但是网上的案例很多不能用，浪费时间，总结一下，方便下次直接使用！！！我是陈小知，不做无用的代码分享！