js实现文字上下滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现问题滚动</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<style>
    *{
        padding:0;
        margin: 0;
    }
    ul,li{
        list-style: none;
    }
    .box{
        width: 300px;
        height: 20px;
        overflow: hidden;
        background-color: black;
        position: relative;
    }
    .box .list{
        width: 300px;
        height: auto;
        position: absolute;
    }
    .box .list  li{
        width: 300px;
        height: 20px;
        line-height: 20px;
        color: red;
        font-size: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }


    .box2{
        width: 600px;
        height:20px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
</style>
<body>
    <div class="box">
        <ul class="list" data="0">
            <li>这期老板很实在呀,另外应该锅底或者别的什么费用,我还点了一些收费的东西,所以老板不会亏的(⌒▽⌒)</li>
            <li>《AKB少女90天的挑战》第七期正式上线!魏新回上海参加拍摄工作,瑞希迎来了难得的休假日,她们分别度过了怎样的一天呢?</li>
            <li>感冒没好利索,再加上“服务员”临时有事,直播顺延至明天,万请见谅</li>
        </ul>
    </div>

    <div class="box2">
        <div class="font">《AKB少女90天的挑战》第七期正式上线!魏新回上海参加拍摄工作,瑞希迎来了难得的休假日,她们分别度过了怎样的一天呢?</div>
    </div>
    <script>
        $(function(){
            setInterval("font_auto();",3000);
        });
        function font_auto(){
            var num = $(".box .list").attr("data");
            num ++ ;
            if(num > $(".box .list li").length-1){
                num = 0;
            }
            $(".box .list").attr("data",num);
            $('.box .list').animate({'top':-20*num});

        }
    </script>
</body>
</html>
原文地址:https://www.cnblogs.com/cl94/p/10631970.html