企业管理系统定制开发源码获取方式：

---

企业管理系统定制开发没有会员的小伙伴直接私聊我“数据滚动”企业管理系统定制开发即可我可以给你单独打包发去（免费的！）

---

案例展示：

功能说明：

企业管理系统定制开发本案例功能为数据自动滚动，可搭配后端进行数据实时的可视化添加，光标移动到屏幕处可以暂停滚动，移开继续滚动

  

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

---

再带大家复习一下定时器的相关知识：

 setInterval ( 回调函数，延迟的毫秒数 )

记住这个定时器的回调函数时间每过一次就会执行一次，两种函数写法与 setTimeout 相同

<script>
        window.setInterval(function(){
           alert('时间到啦');
        },4000)
    </script>

注意点：

• window 可以省略
• 可以采用直接写函数或写函数名
• 时间一定要写成毫秒数
• 页面中可能有很多定时器，最好设置标志符号，var time1= window.setTimeout(fn,2000)