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>
巴特西

js实现文字上下滚动

最新文章

热门文章
