无缝单条新闻滚动效果---原生JavaScript 手作

前端入坑纪 03

让假期来得更猛烈些吧！今天假期第一天，来个新闻滚动！

今天总感觉直接切换过来太突兀，想想还是这样做个无缝的好！

头等大事：项目链接

HTML 结构

    <div class="ulwrp">
        <ul id="oul">
            <li>新闻标题内容示例001</li>
            <li>新闻标题内容示例002</li>
            <li>新闻标题内容示例003</li>
            <li>新闻标题内容示例004</li>
            <li>新闻标题内容示例005</li>
            <li>新闻标题内容示例006</li>
        </ul>
    </div>

CSS 结构

        ul,
        li {
            text-align: center;
            padding: 0;
            margin: 0;
        }
        
        .ulwrp {
            height: 35px;
            line-height: 35px;
            overflow: hidden;
        }
        ul>li {
            height: 35px;
            line-height: 35px;
        }
        ul>li:nth-child(even) {
            color: #666;
            background: lightyellow;
        }
        
        ul>li:nth-child(odd) {
            color: #fff;
            background: lightskyblue;
        }

关键的JavaScript

        var oul = document.getElementById('oul');
        var olis = oul.getElementsByTagName('li');
        var indexNum = 0;
        // 创建个新的li，里面包含第一个li的内容
        var ofst = document.createElement("li");
        ofst.innerText = olis[0].innerText;
       // 将新的li添加到ul里
        oul.appendChild(ofst);
      // 获取当前最新的长度
        var liLens = olis.length;

        function sclNews() {
            indexNum++;
            //判定是否到达最后行
            if (indexNum < liLens) {
                oul.style.transition = "transform .5s ease-in"; //添加css过渡时的效果
                // 每次滚动的距离是 单行高*行数
                oul.style.transform = "translateY(-" + 35 * indexNum + "px)";
            } else {
                indexNum = 0;
                oul.style.transition = ""; //去除css过渡效果
                oul.style.transform = "translateY(-" + 35 * indexNum + "px)";
                // 当从列表底部回到头部时，立马切换到第二个li，预留了100毫秒给js处理，所以这里花费的总时间是1900ms
                setTimeout(function() {
                    indexNum = 1;
                    oul.style.transition = "transform .5s ease-in";
                    oul.style.transform = "translateY(-" + 35 * indexNum + "px)";
                }, 100)
            }
        }
        // 每隔1800ms执行
        setInterval(sclNews, 1800)

其实这里的过渡效果可以直接写在 css 对应的 class 里面。笔者这么写，只是为了滚到底部时，效果不要重新又滚动回去，而是直接切换。简单来说就是把最后行到第一行的过渡效果取消了。

Ps:My skill's not better enough! 如有错漏，还请不吝赐教