jQuery实现消息列表循环垂直向上滚动-优快云博客

HTML代码：

                <ul id="notice">
                    <li class="text-ellipsis">这是一条消息0</li>
                    <li class="text-ellipsis">这是一条消息1</li>
                    <li class="text-ellipsis">这是一条消息2</li>
                </ul>

jQuery代码：

$(function () {
    movedome();
});


function movedome(){
        var margintop=0;//上边距的偏移量
        var stop=false;
        setInterval(function(){
            if(stop==true){
                return;
            }
            $("#notice").children("li").first().animate({"margin-top":margintop--},0,function(){
                var $li=$(this);
                if(!$li.is(":animated")){//第一个li的动画结束时
                    if(-margintop>$li.height()){
                        $li.css("margin-top","0px").appendTo($("#notice"));
                        margintop=0;
                    }
                }
            });
        },50);
        //鼠标放到快递信息(ul)上时
        $("#notice").hover(function(){
            $(this).css("cursor","pointer");
            stop=true;//停止动画
        },function(){
            stop=false;//开始动画
        });
    }

或者

        <style>
            .ul1{list-style: none;margin: 0}
            li{padding: 5px;}
        </style>
        <div style="background-color:pink; margin:15px 90px 0 90px;padding-left: 310px; height: 600px;">
            <div style="position: relative;height: 26px;overflow: hidden;">
                <ul class="ul1">
                    <li>K先生：我求求你嫁给我</li>
                    <li>K先生：等你老了，我依然背着你</li>
                    <li>K先生：我给你当拐杖</li>
                    <li>K先生：等你没牙了，我就嚼碎了再喂给你吃</li>
                </ul>
<%--                <img style="position: absolute;top: 9px;left: 20px" width="15px" height="15px" src="laba.png">--%>
            </div>
        </div>

$(function () {
    var num=$(".ul1").find("li").length;
    console.log("直接运行"+num);
    if (num>1) {
        setInterval(function(){
            $('.ul1').animate({
                marginTop:"-26px"
            },500,function(){
                $(this).css({marginTop : "0"}).find("li:first").appendTo(this);
            });
        }, 3000);
    }
})