JQuery加载列表实现动画滚动（自上而下挤）

　　这个例子是jquery动态加载列表，并通过定时刷新，实现其循环滚动效果的一个例子。

1、HTML代码：

<div class="fake-table">
    <li class="fake-table-hr">
        <span>姓名</span>
        <span>地点</span>
        <span>联系方式</span>
    </li>
    <div class="table-wrap">
        <ul id="J_Table">
        </ul>
    </div>
</div>

2、CSS代码：

.fake-table {
    position: relative;
    height: 140px;
    font-size: 14px;
    list-style: none;
}

.table-wrap {
    height: 120px;
    overflow: hidden;
}

.table-wrap ul {
    position: rerlative;
}

.fake-table li {
    width: 500px;
    height: 20px;
    margin: 0 auto;
    line-height: 20px;
    border: 1px solid #0B519D;
    background-color: rgba(24, 65, 157, 0.25);
    border-top: none;
}

.fake-table li.fake-table-hr {
    height: 20px;
    line-height: 20px;
    background: url(images/table-tr.png) no-repeat;
    border: none;
    font-weight: bold;
}

.fake-table li span {
    float: left;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}

3、JS代码：

<script type="text/javascript">
$(function(){
    // 定义要加载的数据
    var data = [{
            name: '张三',
            address: '滨江区信诚路',
            contact: '15727678507'
        },{
            name: '张三',
            address: '滨江区信诚路',
            contact: '15727678507'
        },{
            name: '张三',
            address: '滨江区信诚路',
            contact: '15727678507'
        },{
            name: '张三',
            address: '滨江区信诚路',
            contact: '15727678507'
        },{
            name: '张三',
            address: '滨江区信诚路',
            contact: '15727678507'
        },{
            name: '张三',
            address: '滨江区信诚路',
            contact: '15727678507'
        }
    ];

    
    /**
    * renderTableData（循环数组加载列表方法）
    * @param [Array] data（要加载的数组）
    */
    function renderTableData(data) {
        var len = data.lenght;
        var lineHeight = 20;    // 每行li的行高
        var infoWrap = $('#J_Table');
        var htmlArr = [];
        var item = '';
        for (var i = 0; i < len; i++) {
            item = '<li>'
                    + '<span>' + data[i]['name'] + '</span>'
                    + '<span>' + data[i]['address'] + '</span>'
                    + '<span>' + data[i]['contact'] + '</span>'
                    + '</li>';
            htmlArr.push(item);
        }

        infoWrap.prepend(htmlArr.join(''));    // 将htmlArr数组添加到页面元素中
        
        infoWrap.css({
            'top': - len * lineHeight + 'px';    // 设置（负每行行高*数组长度）的top值，将加载列表定位到显示区域上方（即隐藏）
        }).animate({
            'top': '0px'    // 设置top值为0,即加载列表整个展示出来
        }, 1000, 'swing', function() {    // 设置间隔为1000，动画效果为"swing"（有"swing"和"linear"两种）
            $('li:gt(' + (len - 1) + ')', infoWrap).remove();    // 将原先的元素内容移除
        });
    }

    /**
    *timlyRenderData （定时请求的方法）
    *
    */
    function timlyRenderData() {
        if(this.clearTimlyId) {    // 如果定时请求存在，则清除
            clearInterval(this.clearTimlyId);
        }
        this.clearTimlyId = setInterval(function() {    // 创建定时请求
            renderTableData(data);
        }, 5000);
    }

    renderTableData(data);    //调用该方法
    
    timlyRenderData();    // 调用定时请求方法
});

 

来源：https://www.cnblogs.com/minozMin/p/8312524.html