jquery实现table中tr或ul的li自动向上滚动效果

一、table滚动

html结构:

<div class="tbl-body" style="height:85%;overflow: hidden">
     <table>
         <thead>
         <tr>
             <td>序号</td>
             <td>名称</td>
             <td>版本号</td>
             <td>类型</td>
             <td>次数</td>
         </tr>
         </thead>
         <tbody>
         	
         </tbody>
     </table>
 </div>

overflow: hidden实现内容超出部分隐藏功能；

js代码：

<script type="text/javascript">
    var str = '';
    var Items = [{"Ranking": "1", "Name": "保定", "Version": "CA.29191", "Type": "296071.96", "Number": "7200000"},
        {"Ranking": "2", "Name": "沧州", "Version": "CA.29191", "Type": "93717.83", "Number": "3200000"},
        {"Ranking": "3", "Name": "秦皇岛", "Version": "CA.29191", "Type": "241071.82", "Number": "3000000"},
        {"Ranking": "4", "Name": "衡水", "Version": "972451.15", "Type": "87638.60", "Number": "2700000"},
        {"Ranking": "5", "Name": "石家庄", "Version": "939010.52", "Type": "140217.37", "Number": "72000000"},
        {"Ranking": "6", "Name": "邢台", "Version": "774274.70", "Type": "124693.90", "Number": "3700000"},
        {"Ranking": "7", "Name": "唐山", "Version": "680456.79", "Type": "50542.14", "Number": "3600000"},
        {"Ranking": "8", "Name": "张家口", "Version": "613319.87", "Type": "176075.96", "Number": "3000000"},
        {"Ranking": "9", "Name": "中油华奥", "Version": "596575.25", "Type": "387024.26", "Number": "11000000"},
        {"Ranking": "10", "Name": "承德", "Version": "589048.12", "Type": "68966.73", "Number": "2200000"},
        {"Ranking": "11", "Name": "廊坊", "Version": "515448.14", "Type": "137934.72", "Number": "3500000"},
        {"Ranking": "12", "Name": "瑞州", "Version": "399875.26", "Type": "85371.46", "Number": "2000000"},
        {"Ranking": "13", "Name": "石家庄中油", "Version": "90543.62", "Type": "20065.14", "Number": "430000"},
        {"Ranking": "14", "Name": "辛集中油", "Version": "49255.52", "Type": "8743.12", "Number": "250000"},
        {"Ranking": "15", "Name": "井陉中油", "Version": "29682.60", "Type": "2175.66", "Number": "140000"},
        {"Ranking": "16", "Name": "保定中油", "Version": "11887.73", "Type": "2944.97", "Number": "100000"}];
    $.each(Items, function (i, item) {
        str = '<tr>' +
            '<td>' + item.Ranking + '</td>' +
            '<td>' + item.Name + '</td>' +
            '<td>' + item.Version + '</td>' +
            '<td>' + item.Type + '</td>' +
            '<td>' + item.Number + '</td>' +
            '</tr>';

        $('.tbl-body tbody').append(str);
    });

 // 实现自动滚动
 // var trNumber = $(".table_quality").find("tbody").find("tr").length;
    var scroll = setInterval('autoScroll(".tbl-body")', 1000); // 时间越小速度越快

    // 鼠标移上去取消事件
    $(".tbl-body").hover(function() {
        clearInterval(scroll);
    }, function() {
        clearInterval(scroll);
        scroll = setInterval('autoScroll(".tbl-body")', 1000);
    })

  	function autoScroll(obj) {
        $(obj).find("tbody:first").animate({
            marginTop: "-10px"
        }, 10, function () {
            $(this).css({
                marginTop: "0px"
            }).find("tr:first").appendTo(this); //将该行的margin值置零,然后插入到最后
        })
    }
</script>

二、ul中li自动滚动

html结构：

<div class="lefttoday_bar pulefttoday_bar" id="projectList_div">
    <ul id="projectList" class="right-bottom-body">
    	<li></li>
    	<li></li>
    </ul>
</div>

jquery:

 var scroll0 = setInterval('autoScrollUl("#projectList_div")', 1000);
 // 鼠标移上去取消事件
  $("#projectList_div").hover(function() {
      clearInterval(scroll0);
  }, function() {
      clearInterval(scroll0);
      scroll0 = setInterval('autoScroll("#projectList_div")', 1000);
  });
 function autoScrollUl(obj) {
     $(obj).find("ul:first").animate({
         marginTop: "-10px"
     }, 10, function () {
         $(this).css({
             marginTop: "0px"
         }).find("li:first").appendTo(this); //将该行的margin值置零,然后插入到最后
     })
 }

参考博文：https://blog.csdn.net/weixin_33713350/article/details/91885792