【jQuery】文字滚动效果

列表文字无缝滚动

（说明：姓名和地点都是随机生成）

<!-- 领取动态 -->
<div class="dynamic">
    <div class="activity" id="J_Activity">
        <ul>
            <!-- <li >来自湖南苏**女士成功 领取多功能早餐一台~</li>
        <li>来自江西陈**女士成功 领取多功能早餐一台~</li>
        <li>来自内蒙古林**女士成功 领取多功能早餐一台~</li>
        <li>来自江苏谢**女士成功 领取多功能早餐一台~</li>
        <li>来自江苏谢**女士成功 领取多功能早餐一台~</li>
        <li>来自江苏谢**女士成功 领取多功能早餐一台~</li>
        <li>来自江苏谢**女士成功 领取多功能早餐一台~</li>
        <li>来自江苏谢**女士成功 领取多功能早餐一台~</li>
        <li>来自江苏谢**女士成功 领取多功能早餐一台~</li>
        <li>来自江苏谢**女士成功 领取多功能早餐一台~</li> -->
        </ul>
    </div>
</div>

.dynamic {
     100%;
    height: 3.23rem;
    background-color: #ffdb7a;
    border-radius: .2rem;
    margin: .76rem 0 .74rem;
    position: relative;
    padding-top: .67rem;

    // 标题
    &::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);
         2.44rem;
        height: .63rem;
        background: url(../images/tit.png) no-repeat;
        background-size: cover;
    }

}

/*获奖名单-无缝滚动*/
.activity {
     100%;
    position: relative;
    overflow: hidden;
    height: 140px;
}

.activity ul {
    top: -15px;
    position: relative;
}

.activity li {
    height: 34px;
    padding: 0;
    font-size: 14px;
    line-height: 34px;
    color: #ac6a00;
    text-align: center;
}

 var xing_str = '赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨朱秦尤许何吕施张孔曹严华金魏陶姜戚谢邹喻柏水窦章 云苏潘葛 奚范彭郎 鲁韦昌马 苗凤花方 俞任袁柳 酆鲍史唐 费廉岑薛 雷贺倪汤 滕殷罗毕 郝邬安常乐于时傅皮卞齐康伍余元卜顾孟平黄和穆萧尹姚邵舒汪祁毛禹狄米贝明臧计伏成戴谈宋茅庞熊纪屈项祝董杜阮';
        var sex_arr = ["先生", "女士"];
        var sheng_str = '河北省、山西省、辽宁省、吉林省、黑龙江省、江苏省、浙江省、安徽省、福建省、江西省、山东省、河南省、湖北省、湖南省、广东省、海南省、四川省、贵州省、云南省、陕西省、甘肃省、青海省';

        for (var i = 0; i < 100; i++) {
            var xing = xing_str.split('')[Math.floor(Math.random() * xing_str.split('').length)];
            var sex = sex_arr[Math.floor(Math.random() * sex_arr.length)];
            var sheng = sheng_str.split('、')[Math.floor(Math.random() * sheng_str.split('、').length)];
            var html = "来自" + sheng + "的" + xing + "**" + sex + "成功 领取多功能早餐一台~";
            $("#J_Activity ul").append("<li>" + html + "</li>");
        }

        // 中奖名单-无缝滚动
        $(function () {
            var listPanel = $('.activity ul');
            var nubcers = 0;//向上滚动top值
            function up() {//向上滚动
                listPanel.animate({//中奖结果
                    'top': (nubcers - 35) + 'px'
                }, 1500, 'linear', function () {
                    listPanel.css({ 'top': '0px' })
                        .find("li:first").appendTo(listPanel);
                    up();
                });
            }
            up();
        });