• 滚动显示


    .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);
            }
        });
    }
    故乡明
  • 相关阅读:
    弹性盒模型
    CSS3属性
    CSS3选择器
    闭包
    angularjs-select2的使用
    angular 分页插件的使用
    webstorm 破解
    数组和字符串之间的转化
    git 拉取分支代码 合分支
    时间戳转化为时间格式 时间格式转为时间戳
  • 原文地址:https://www.cnblogs.com/luweiweicode/p/15342894.html
Copyright © 2020-2023  润新知