js实现文字一行一行向上轮播(也可以是div,包括div内的任何东西)

时间:2025-03-10 08:06:02
            ul li {
                width: 600px;
                height: 50px;
                line-height: 50px;
                font-size: 20px;
                color: #333;
                text-align: center
            }
        </style>
    </head>
    <body>
        <div class="lunbo">
            <ul>
                <li>人生在世须尽欢 莫使金樽空对月</li>
                <li>我寄愁心与明月,随风直到夜郎西</li>
                <li>不是花中偏爱菊,此花开尽更无花</li>
                <li>辛苦遭逢起一经,干戈寥落四周星</li>
                <li>山河破碎风飘絮,身世浮沉雨打萍。</li>
                <li>惶恐滩头说惶恐,零丁洋里叹零丁。</li>
                <li>人生自古谁无死?留取丹心照汗青。</li>
            </ul>
        </div>
        <script src="///jquery/2.2.2/"></script>
        <script>
            function lunbo(id, height) {
                var ul = $(id);
                var liFirst = ('li:first');
                $(id).animate({
                    top: height
                }).animate({
                    "top": 0
                }, 0, function() {
                    var clone = ();
                    $(id).append(clone);
                    ();
                })
            }
            setInterval("lunbo('ul','-50px')", 3000)
        </script>
    </body>
</html>