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>

 

posted @ 2019-03-31 16:43  cl94  阅读(403)  评论(0)    收藏  举报