滚动显示

复制代码
.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);
        }
    });
}
复制代码

 

posted @   Bonnie_ξ  阅读(39)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 25岁的心里话
点击右上角即可分享
微信分享提示