【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 {
    width: 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%);
        width: 2.44rem;
        height: .63rem;
        background: url(../images/tit.png) no-repeat;
        background-size: cover;
    }

}

/*獲獎名單-無縫滾動*/
.activity {
    width: 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();
        });

簡單易懂的文字特效