滚动显示

.text_scroll_area {
    overflow: hidden;
    height: 14px;
    font-weight: bold;
    display: inline-block;
    font-size: 14px;
    color: red;
}

.text_scroll_area ul {
    position: relative;
    top: 0px;
    margin-left: 10px

}

.text_scroll_area li {
    font-size: 14px;
    font-weight: bold;
}
<div class="layui-row">
<#--头部竖向轮播-->
    <div class="text_scroll_area">
        <ul id="importantRisk">
        </ul>
    </div>
</div>
//头部重点详情竖向滚动
function scroll_area(font_size, scroll_time) {
    var area_height = font_size
    $('.text_scroll_area ul').css('fontSize', font_size)
    // $('.text_scroll_area').height(area_height)
    var item_index = $('.text_scroll_area ul').children().length
    var list_height = $('.text_scroll_area ul').height()
    var _top = 0
    var index = 1
    if (item_index > 1) {
        var loop = setInterval(function () {
            if (index < item_index) {
                index = index + 1;
                _top = _top - area_height
                var store = _top
                $('.text_scroll_area ul').animate({'top': store + 'px'})
            } else {
                index = 1
                _top = 0
                var store = _top
                $('.text_scroll_area ul').animate({'top': store + 'px'})
            }
        }, scroll_time)
        //暂停和恢复
        $('.text_scroll_area li').hover(function () {
            clearInterval(loop)
        }, function () {
            loop = setInterval(function () {
                if (index < item_index) {
                    index = index + 1;
                    _top = _top - area_height
                    var store = _top
                    $('.text_scroll_area ul').animate({'top': store + 'px'})
                } else {
                    index = 1
                    _top = 0
                    var store = _top
                    $('.text_scroll_area ul').animate({'top': store + 'px'})
                }
            }, scroll_time)
        })
    }
}
function getImportantRisk() {
    $.ajax({
        type: "post",
        dataType: 'json',
        url: '/baseData/shopManage/getImportantRisk.do',
        data: {
            "shopType": $("#shopType").val(),
            "shopId": $("#shopId").val()
        },
        success: function (result) {
            if (result.status) {
                var data = result.data;
                var li = "";
                if (data && data[0]) {
                    // 风险
                    li += "<li>" + result.data[0] + "</li>"
                }
                if (data && data[1]) {
                    // 协查
                    li += "<li>" + result.data[1] + "</li>"
                }
                $('ul#importantRisk').append(li);
            }
            scroll_area(14, 2000);
        }
    });
}
故乡明
原文地址:https://www.cnblogs.com/luweiweicode/p/15342894.html