源码获取方式：
没有会员的小伙伴直接私聊我“数据滚动”即可我可以给你单独打包发去（免费的！）
案例展示：
功能说明：
本案例功能为数据自动滚动，可搭配后端进行数据实时的可视化添加，光标移动到屏幕处可以暂停滚动，移开继续滚动
另外，本数据可视化大屏页面可以搭配后端代码使用进行数据的实时添加可视化展示的作用，如果有需要可以将本案例中数据的表格的td数据信息换为用户个人信息的主页链接，这样光标移上暂停滚动后可以对用户主页信息进行查看，另外如果整个代码直接搬用复制到各位大佬的网站页面，可能会出现一些不可预估的错位，因为本案例是设置的居中屏幕的
实现代码：
实现原理：
本案例实现也非常简单，既然是滚动效果，必然是少不了 setInterval 定时器，由于增加了光标放上去滚动暂停以及光标移开滚动继续，所以需要两次定时器的设置，移开之后需要再是指一次定时器，这里我们为了方便就可以将定时器单独封装成一个函数，在定时器内调用该函数即可，另外，我们还需要在鼠标移上之后清除一次所有正在工作的定时器，这是为了解决速度叠加问题，如果不清除，那么每次移上都会加速一次。最后一个注意点是：光标移开的定时器命名不能使用局部变量，否则清除定时器会失效。
<script>
document.addEventListener('DOMContentLoaded',function(event){
var inner=document.querySelector('.innerbg');
var screen=document.querySelector('.screen');
var mask=document.querySelector('.mask')
console.log(inner.offsetHeight);
var timer=window.setInterval(animate,12)
function animate(){
if(inner.offsetTop===-(inner.offsetHeight-screen.offsetHeight+10)){
inner.style.top=0+'px'
}else{
var l=inner.offsetTop;
l=l-1;
inner.style.top=l+'px'
}
}
mask.addEventListener('mouseover',function(){
window.clearInterval(timer)
})
mask.addEventListener('mouseout',function(){
timer=window.setInterval(animate,12)
})
})
</script>
布局代码：
<div class="background">
<div class="border">
<div class="lt"></div>
<div class="rt"></div>
<div class="lb"></div>
<div class="rb"></div>
</div>
</div>
<div class="screen">
<div class="mask"></div>
<div class="innerbg">
<table cellspacing="0">
<tr>
<td>IP 196.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 110.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 106.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 186.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 161.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 116.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 145.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 126.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 196.168.123.134 以游客访问该网站</td>
</tr>
<tr>
<td>IP 161.168.123.134 以游客访问该网站</td>
</tr>
<tr>
### 最后
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于**前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等**
**前端视频资料：**
**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
