在做html页面时，为了提升网页的用户体验，我们需要在网页中加入一些特效，比如多行区域文字上下滚动就是经常用到的特效。代码如下图：

样式

<style>
 * {
                margin: 0;
                padding: 0;
            }
            .container {
                width: 800px;
                height: 300px;
                border: 1px solid;
                overflow: hidden;
                position: relative;
            }
            .container ul {
                list-style: none;
                position: absolute;
                width: 100%;
                top: 0;
                text-align: center;
            }
            .container ul >li{
                width: 100%;
                height: 50px;
                border: 1px solid;
                line-height: 50px;
            }
            .container >.nav {
                width: 100%;
                height: 50px;
                line-height: 50px;
                position: absolute;
                background-color: red;
                z-index: 1;
                text-align: center;
            }
        </style>
</style>

结构

<div class="container" id ="container">
        <div class="nav" id ="nav">滚动条</div>
        <ul id="ul">
            <li>Leo 中了一个手机</li>
            <li>张三 中了一个手机</li>
            <li>老王 中了一台洗衣机</li>
            <li>Leo 中了一个手机</li>
            <li>妹妹 中了一带洗衣液</li>
            <li>阿三 中了一个手机</li>
            <li>阿四 中了一台电脑</li>
            <li>阿五 中了一个手机</li>
            <li>阿六 中了一部手机</li>
            <li>阿巴 中了一个手机</li>
            <li>阿十 中了一个手机</li>
        </ul>
    </div>

js

<script>
        var container = document.getElementById('container');
        var ul = document.getElementById('ul');
        var timer = null;
        function lunPo() {
            if(!timer) {
                var count = 0;
                timer = setInterval(function() {
                    count +=1;
                    ul.style.top = count + 'px';
                    if(count >= 50) {
                        count = 0;
                        var flag;
                        flag = ul.children[0].cloneNode(true);
                        ul.removeChild(ul.children[0]);
                        ul.appendChild(flag)
                    }
                },10)
            }
        }
        lunPo();
    </script>

Image 14.png

这样一个简单的文字向上轮播就完成啦！
希望我的理解可以给你们提供一些帮助，学识有限，如果有地方出现错误或者有更好的方法去实现，欢迎私信！