前言：

        本人纯小白一个，有很多地方理解的没有各位大牛那么透彻，如有错误，请各位大牛指出斧正！小弟感激不尽。

        本篇文章为您分析一下原生JS写文字滚动效果

需求分析:

• 需要用到animate.js动画插件 【上一篇博客中】 https://www.cnblogs.com/qq4297751/p/12651460.html

• 如果您没有看过我上一篇的运动插件的博客，那么请您先看完运动插件再来查阅下面这篇文章，本片文章只是对运动插件的一个小应用

HTML结构

    <div class="container">
        <div class="left title">最新公告</div>
        <div class="left item">
            <ul>
                <li>1.Lorem ipsum dolor sit.</li>
                <li>2.Deserunt nobis eum consectetur.</li>
                <li>3.Deleniti ut esse praesentium?</li>
                <li>4.Unde ullam dolore dicta!</li>
                <li>5.Hic dicta atque esse.</li>
            </ul>
        </div>
    </div>

CSS样式

        .container {
            background-color: #b3effe;
            height: 50px;
            padding: 10px 20px;
            box-sizing: border-box;
        }

        .left {
            float: left;
            height: 30px;
            line-height: 30px;
        }

        .title::after {
            content: "|";
            margin-left: 15px;
            font-size: 25px;
            color: #d8d8d8;
            /* vertical-align: -5px; */
        }

        .left ul {
            margin: 0;
            padding: 0;
            list-style: none;
            margin-left: 20px;
            height: 30px;
            overflow: auto;
        }

        .left ul li {
            height: 30px;
        }

// 选中ul
var ul = document.querySelector(".left ul");
// 第一步: 要让他无缝滚动，需要复制第一个li
function cloneFirstLi() {
    // 深度克隆第一个li元素
    var firstLi = ul.children[0].cloneNode(true);
    // 添加到ul之后
    ul.appendChild(firstLi);
}

cloneFirstLi(); // 调用函数

/**
 * 第二步: 开始滚动
 */
function startSroll() {
    // 设置定时器
    setInterval(scroll, 2000)
}

/**
 * 第三步: 滚动一次的距离
 */
function scroll() {
    // 调用运动插件
    var animate = new myPlugin.Animate({
        total: 300,               // 总时间
        begin: {
            top: curTop           // 开始滚动条的高度
        },
        end: {
            top: curTop + height  // 结束滚动条的高度 = 当前滚动条的高度加上滚动距离
        },
        onmove: function () {
            curTop = this.curData.top;  // 目标状态的滚动条高度
            ul.scrollTop = curTop;      // 重新设置滚动条的高度
        },
        onover: function () {
            // 如果当前滚动条的高度 - 滚动距离 === 目标状态的滚动条高度
            if (ul.scrollHeight - height === curTop) {
                curTop = 0;             //滚动条回到0
                ul.scrollTop = curTop;  // 重新设置滚动条的高度
            }
        }
    });
    animate.start();  // 调用开始函数
}

startSroll();

结语

整完！！！