全站最简单 “数据滚动可视化大屏” 【JS基础拿来即用】_数据滚动大屏源码

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

另外，本数据可视化大屏页面可以搭配后端代码使用进行数据的实时添加可视化展示的作用，如果有需要可以将本案例中数据的表格的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>
                    <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>  
            </table>
        </div>
    </div>

---

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

真正体系化！**

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取