js 字幕滚动

* {
        margin: 0;
        padding: 0;
      }
      #view {
        width: 300px;
        height: 50px;
        border: 2px solid #dedede;
        margin: 200px auto;
        overflow: hidden;
      }
      li {
        list-style: none;
      }
      #list li {
        width: 300px;
        height: 50px;
        line-height: 50px;
        text-indent: 2em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

<div id="view">
      <ul id="list">
        <li>郑州单双限号</li>
        <li>金马奖台独</li>
        <li>ig夺冠</li>
        <li>外卖商家不刷锅</li>
        <li>王聪学习js非常吃力</li>
        <li>丁修国笑话王聪引争议</li>
        <li>震惊,王聪消失一个多月，竟在做这些事情</li>
      </ul>
    </div>

var list = document.querySelector('#list');
        // console.log(list.children[0]);
        function nextPage(){
            // console.log('111');
            
            ani(list,'marginTop',-50,400,function(){
                list.style.marginTop = 0;
                // 把第一个放在最后的位置
                list.appendChild(list.children[0]);
            })
        }
        var timer = setInterval(nextPage, 1000);
        view.onmouseover = function(){
            clearInterval(timer);
        }
        view.onmouseout = function(){
            timer = setInterval(nextPage, 1000);
        }
//js动画封装
function ani(el,str,end,tm,fn){
    clearInterval(el.timer);
    // 1.获取初始样式
    var start = getSty(el,str);
    start = parseFloat(start);
    // 2.求差
    var s = end - start;
    // console.log(s);
    
    // 3.执行动画
    el.timer = setInterval(function(){
        start += s/tm*16.7;//每次属性值的变化（每次移动的距离）
        if(s>0){//end>start 业务
            if(start>=end){
                start = end;
                clearInterval(el.timer);
                flag = true;
                el.style[str] = str === 'opacity'?start:start+'px';
                // 执行下一个动画业务
                fn?fn():null;//判断是否传入参数:如果有参数，执行回调函数
            }else{
                el.style[str] = str === 'opacity'?start:start+'px';
            }
        }else{//end<start 业务
            if(start<=end){
                start = end;
                clearInterval(el.timer);
                flag = true;
                el.style[str] = str === 'opacity'?start:start+'px';
                fn?fn():null;
            }else{
                el.style[str] = str === 'opacity'?start:start+'px';
            }
            
        }
    }, 16.7);
}
function getSty(el,str){
    var res;
    if(el.currentStyle){//ie
        res = el.currentStyle[str];
    }else{//非IE
        res = getComputedStyle(el)[str];
    }
    return res;
}