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

marquee向上无缝滚动

我们先来看看向上滚动的marquee效果:
原生js实现marquee向上/向左无缝滚动,鼠标移入暂停效果!-Qui-Note

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

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/marquee-js

marquee向左无缝滚动

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

原生js实现marquee向上/向左无缝滚动,鼠标移入暂停效果!-Qui-Note

原理部分:

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

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